Update templates/menu.html

templates/menu.html

@@ -153,7 +153,7 @@
                         <p class="card-text">${{ item.Price__c }}</p>
                         <p class="card-text"><small class="text-muted">{{ item.Category__c }}</small></p>
                         <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}')">
+                            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{item.Section__c}}')">
                             Add +
                         </button>
                     </div>
@@ -207,7 +207,7 @@
 
     <!-- JavaScript -->
     <script>
-        function showItemDetails(name, price, image, description) {
+        function showItemDetails(name, price, image, description, section) {
             // Set modal content dynamically
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
@@ -215,6 +215,7 @@
             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
             // Fetch add-ons dynamically based on item Name
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}`)
                 .then(response => response.json())