Update templates/menu.html

templates/menu.html

@@ -196,6 +196,8 @@
                         <h6>Special Instructions</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                     </div>
+                    <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
+
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
@@ -215,9 +217,10 @@
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = 'Loading add-ons...';
             document.getElementById('modal-instructions').value = '';
-           document.getElementById('modal-section').innerText = section || 'No section available';  // Show section
-           document.getElementById('modal-section').setAttribute('data-section', section);
-           document.getElementById('modal-section').setAttribute('data-category', selectedCategory);
+            // Correctly set data attributes for section and category
+            const modalSectionEl = document.getElementById('modal-section');
+            modalSectionEl.setAttribute('data-section', section);
+            modalSectionEl.setAttribute('data-category', selectedCategory);
             // Fetch add-ons dynamically based on item Name
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}`)
                 .then(response => response.json())
@@ -248,8 +251,9 @@
             const itemName = document.getElementById('modal-name').innerText; // Get item name
             const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); // Get item price
             const itemImage = document.getElementById('modal-img').src; // Get item image
-            const section = document.getElementById('modal-section').getAttribute('data-section');
-            const selectedCategory = document.getElementById('modal-section').getAttribute('data-category');
+            const modalSectionEl = document.getElementById('modal-section');
+            const section = modalSectionEl.getAttribute('data-section');
+            const selectedCategory = modalSectionEl.getAttribute('data-category');
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
             ).map(addon => ({