Update script.js

script.js

@@ -14,26 +14,27 @@ function render() {
         mesaInput.className = 'mesa-input';
         mesaInput.innerHTML = `
             <div class="mesa-controls">
-                <button id="decreaseMesa" class="btn btn-outline-secondary">-</button>
-                <span id="mesaNumero" class="mesa-number">${mesaNumero}</span>
-                <button id="increaseMesa" class="btn btn-outline-secondary">+</button>
+                <button class="btn btn-outline-secondary decrease-mesa">-</button> 
+                <span class="mesa-number">${mesaNumero}</span>
+                <button class="btn btn-outline-secondary increase-mesa">+</button>
             </div>
-            <button id="confirmMesa" class="btn btn-primary">Confirmar</button>
+            <button class="btn btn-primary confirm-mesa">Confirmar</button>
         `;
         app.innerHTML = '';
         app.appendChild(mesaInput);
 
-        document.getElementById('decreaseMesa').onclick = () => {
+        // Usamos querySelector dentro de mesaInput para encontrar los botones
+        mesaInput.querySelector('.decrease-mesa').onclick = () => { 
             if (mesaNumero > 1) mesaNumero--;
-            document.getElementById('mesaNumero').textContent = mesaNumero;
+            mesaInput.querySelector('.mesa-number').textContent = mesaNumero;
         };
 
-        document.getElementById('increaseMesa').onclick = () => {
+        mesaInput.querySelector('.increase-mesa').onclick = () => {
             mesaNumero++;
-            document.getElementById('mesaNumero').textContent = mesaNumero;
+            mesaInput.querySelector('.mesa-number').textContent = mesaNumero;
         };
 
-        document.getElementById('confirmMesa').onclick = () => {
+        mesaInput.querySelector('.confirm-mesa').onclick = () => {
             mesas.push({ numero: mesaNumero, pedidos: [] });
             render();
         };
@@ -103,13 +104,30 @@ function gestionarMesa(index) {
                     </div>
                 `;
                 opcionesContainer.appendChild(opcionDiv);
+
+                // Añadimos los listeners dentro del bucle, para cada grupo de botones
+                const cantidadControls = opcionDiv.querySelector('.cantidad-controls');
+                const cantidadSpan = cantidadControls.querySelector('.cantidad');
+                cantidadControls.querySelector('.decrease').onclick = () => {
+                    let cantidad = parseInt(cantidadSpan.textContent, 10);
+                    if (cantidad > 0) {
+                        cantidad--;
+                        cantidadSpan.textContent = cantidad;
+                    }
+                };
+
+                cantidadControls.querySelector('.increase').onclick = () => {
+                    let cantidad = parseInt(cantidadSpan.textContent, 10);
+                    cantidad++;
+                    cantidadSpan.textContent = cantidad;
+                };
             });
 
             const confirmarButton = document.createElement('button');
             confirmarButton.textContent = '✔ Confirmar';
             confirmarButton.className = 'btn btn-success btn-block';
             confirmarButton.onclick = () => {
-                const cantidadControls = document.querySelectorAll('.cantidad-controls');
+                const cantidadControls = opcionesContainer.querySelectorAll('.cantidad-controls');
                 cantidadControls.forEach(control => {
                     const cantidad = parseInt(control.querySelector('.cantidad').textContent, 10);
                     if (cantidad > 0) {
@@ -123,7 +141,7 @@ function gestionarMesa(index) {
             };
             opcionesContainer.appendChild(confirmarButton);
 
-            app.innerHTML = '';
+            app.innerHTML = ''; 
             app.appendChild(opcionesContainer);
 
             const volverButton = document.createElement('button');
@@ -166,23 +184,21 @@ function generarTicket(index, total) {
 
     qrContent += `\nTotal: €${total.toFixed(2)}`;
 
-    console.log('QR Content:', qrContent);  // Para depurar el contenido antes de generar el QR.
+    console.log('QR Content:', qrContent);
+
+    app.innerHTML = ''; // Limpiamos el contenido antes de generar el QR
 
-    // Asegúrate de limpiar el contenedor del QR antes de generarlo
     const qrContainer = document.createElement('div');
     qrContainer.className = 'text-center';
     app.appendChild(qrContainer);
 
-    // Usar la API externa para generar el QR
     const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrContent)}&size=256x256`;
 
-    // Crear la imagen del QR
     const qrImage = document.createElement('img');
     qrImage.src = qrUrl;
     qrImage.alt = 'QR Code';
     qrContainer.appendChild(qrImage);
 
-    // Volver a la vista anterior
     const volverButton = document.createElement('button');
     volverButton.textContent = '← Volver';
     volverButton.className = 'btn btn-outline-danger btn-block';
@@ -195,4 +211,3 @@ render();
 
 
 
-