Update templates/menu.html

templates/menu.html

@@ -470,7 +470,7 @@ form.text-center.mb-4 {
         </a>
     </div>
 
- <!-- Modal for Item Details -->
+<!-- Modal for Item Details -->
 <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -557,7 +557,7 @@ form.text-center.mb-4 {
                         listItem.classList.add('form-check');
                         listItem.innerHTML = `
                             <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                   data-name="${option}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
+                                   data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
                             <label class="form-check-label" for="${optionId}">
                                 ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
                             </label>
@@ -583,18 +583,12 @@ form.text-center.mb-4 {
 
     // Handle single-select/deselect logic for checkbox groups in all modals
     function handleAddonClick(checkbox) {
-        const groupName = checkbox.getAttribute('data-name');
-        const modalId = checkbox.closest('.modal').id;
-
-        // Define groups that can allow multiple selections
-        const multiSelectGroups = ["Extra Toppings", "Choose Raita/Sides"];
-
-        // Check if this is a multi-select group
-        const isMultiSelectGroup = multiSelectGroups.includes(groupName);
+        const groupName = checkbox.getAttribute('data-group');
+        const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides"].includes(groupName);
         
+        // If it's not multi-select, uncheck all other checkboxes in the same group
         if (!isMultiSelectGroup) {
-            // If it's not multi-select, uncheck all other checkboxes in the same group
-            const checkboxes = document.querySelectorAll(`.addon-option[data-name="${groupName}"]`);
+            const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
             checkboxes.forEach(otherCheckbox => {
                 if (otherCheckbox !== checkbox) {
                     otherCheckbox.checked = false;
@@ -604,7 +598,7 @@ form.text-center.mb-4 {
     }
 </script>
 
-function addToCartFromModal() {
+  function addToCartFromModal() {
     const itemName = document.getElementById('modal-name').innerText;
     let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
 
@@ -748,8 +742,6 @@ function roundRewardPoints() {
         // Run the function when the page loads
         window.onload = roundRewardPoints;
         
-    </script>
-
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 </body>