Update templates/menu.html

templates/menu.html

@@ -592,6 +592,7 @@ form-check-input addon-option{
 <!-- JavaScript -->
 <script>
 // Show item details and fetch customization options
+// Show item details and fetch customization options
 function showItemDetails(name, price, image, description, section, selectedCategory) {
     console.log(`Showing details for: ${name}`);
     document.getElementById('modal-name').innerText = name;
@@ -656,9 +657,14 @@ function showItemDetails(name, price, image, description, section, selectedCateg
 
                 const checkboxes = document.querySelectorAll('.addon-option');
                 checkboxes.forEach(checkbox => {
-                    const checkboxName = checkbox.getAttribute('data-name').trim(); // Trim spaces
+                    const checkboxName = checkbox.getAttribute('data-name').trim(); // Trim spaces for checkbox value
+                    // Normalize the most common add-ons to avoid spaces, then check if it's in the list
+                    const normalizedAddons = window.most_common_addons.map(addon => addon.trim().toLowerCase());  // Normalize all to lowercase
+
+                    console.log(`Checking checkbox for: ${checkboxName}`);
+
                     // If the checkbox option is one of the most common add-ons, select it
-                    if (window.most_common_addons.map(addon => addon.trim()).includes(checkboxName)) {
+                    if (normalizedAddons.includes(checkboxName.trim().toLowerCase())) {
                         console.log(`Pre-selecting checkbox for: ${checkboxName}`);
                         checkbox.checked = true;
                     } else {
@@ -676,6 +682,7 @@ function showItemDetails(name, price, image, description, section, selectedCateg
 }
 
 
+
   function handleToggle(source) {
         const form = document.getElementById("filter-form");
         const veg = document.getElementById("veg-toggle");