Update templates/menu.html

templates/menu.html

@@ -587,10 +587,13 @@ form-check-input addon-option{
             </div>
         </div>
     </div>
+  <div id="most-common-addons"></div>
+
 </div>
 
 <!-- JavaScript -->
 <script>
+
 // Show item details and fetch customization options
 function showItemDetails(name, price, image, description, section, selectedCategory) {
     console.log(`Showing details for: ${name}`);
@@ -609,17 +612,23 @@ function showItemDetails(name, price, image, description, section, selectedCateg
 
     // Display most common add-ons if available
     const mostCommonAddonsSection = document.getElementById('most-common-addons');
-    mostCommonAddonsSection.innerHTML = ''; // Clear previous content
-    if (window.most_common_addons && window.most_common_addons.length > 0) {
-        // Display the most common add-ons
-        let commonAddonsText = "<h6>Most Common Add-Ons:</h6><ul>";
-        window.most_common_addons.forEach(addon => {
-            commonAddonsText += `<li>${addon}</li>`;
-        });
-        commonAddonsText += "</ul>";
-        mostCommonAddonsSection.innerHTML = commonAddonsText;
+    
+    // Ensure the element exists before setting its innerHTML
+    if (mostCommonAddonsSection) {
+        mostCommonAddonsSection.innerHTML = ''; // Clear previous content
+        if (window.most_common_addons && window.most_common_addons.length > 0) {
+            // Display the most common add-ons
+            let commonAddonsText = "<h6>Most Common Add-Ons:</h6><ul>";
+            window.most_common_addons.forEach(addon => {
+                commonAddonsText += `<li>${addon}</li>`;
+            });
+            commonAddonsText += "</ul>";
+            mostCommonAddonsSection.innerHTML = commonAddonsText;
+        } else {
+            mostCommonAddonsSection.innerHTML = '<p>No most common add-ons found.</p>';
+        }
     } else {
-        mostCommonAddonsSection.innerHTML = '<p>No most common add-ons found.</p>';
+        console.error("Element with id 'most-common-addons' not found.");
     }
 
     // Fetch customization options based on the section