i have been developing the restaurant menu website where i want to load the cards which has the image of the food its name, category and description. I need to load the cards dynamically based on category (ie – starters, beverages, desserts etc..)in the webpage with a video using EventListener click,

• And I created a function displaymenu which has a parameter menuitems that displays the cards.

const menu = [
    { id: 1, title: "Soup of the day", category: "starters", price: "$5", description: "Freshly made soup with seasonal ingredients" },
    { id: 2, title: "Bruschetta", category: "starters", price: "$7", description: "Grilled bread rubbed with garlic and topped with diced tomatoes, fresh basil, and mozzarella"},
    { id: 3, title: "Chicken Parmesan", category: "mains", price: "$12", description: "Crispy chicken topped with tomato sauce and mozzarella, served with spaghetti",},
    { id: 4, title: "Steak Frites", category: "mains", price: "$18", description: "Grilled steak served with french fries and salad" }, 
    { id: 5, title: "Chocolate Lava Cake", category: "desserts", price: "$8", description: "Warm chocolate cake with a gooey molten chocolate center, served with vanilla ice cream" },
    { id: 6, title: "Apple Pie", category: "desserts", price: "$6", description: "Classic apple pie with a flaky crust, served with whipped cream"},
    { id: 7, title: "Vegan Burger", category: "mains", price: "$10", description: "Plant-based burger served with fries"},
    { id: 8, title: "Caesar Salad", category: "starters", price: "$6", description: "Fresh romaine lettuce with Caesar dressing, parmesan, and croutons", img: "https://images.unsplash.com/photo-1550304943-4f24f54ddde9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2Vhc2FyJTIwc2FsYWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" },
    { id: 9, title: "Spaghetti Carbonara", category: "mains", price: "$14", description: "Classic carbonara with pancetta, egg, hard cheese, and pepper"},
    { id: 10, title: "Tiramisu", category: "desserts", price: "$7", description: "Italian dessert made of savoiardi dipped in coffee, layered with a whipped mixture of eggs, sugar, and mascarpone cheese" },
    { id: 11, title: "Iced Coffee", category: "beverages", price: "$4", description: "Chilled coffee served with ice and cream" },
    { id: 12, title: "Mango Lassi", category: "beverages", price: "$5", description: "Refreshing Indian drink made with mango and yogurt"},
    { id: 13, title: "Green Tea", category: "beverages", price: "$3", description: "Traditional green tea with antioxidants"},
  ];



  
const categoryButtons = $(".nav-link");
console.log(categoryButtons);

const menuContainer = $(".rows");
console.log(menuContainer);

window.addEventListener("load", function(){
  displaymenuItems(menuItems);
});

function displaymenuItems(menuItems){
let displaymenu = menuItems.map((item) =>{  //return array with the items mentioned (ie - all,mains,starters,desserts,beverages)
  return 
  `<div class="menu-item col-12 col-md-6 col-lg-4">
      <div class="card">
        <img src="${item.img}" class="card-img-top" alt="${item.title}">
        <div class="card-body">
          <h5 class="card-title">${item.title}</h5>
          <h6 class="card-subtitle mb-2 text-muted">${item.price}</h6>
          <p class="card-text">${item.description}</p>
          <p class="card-text"><small class="text-muted">Category: ${item.category}</small></p>
        </div>
      </div>
    </div>`;
    


    
    
});

displaymenu = displaymenu.join(""); //join method converts array to string...
menuContainer.html(displaymenu);
console.log(displaymenu);
}




$(document).ready(function(){
  displaymenuItems(menu)
})

categoryButtons.click(function(){
  const foods = $(this).attr("data-category");

    if(foods === "all"){
        displaymenuItems(menu);
    }

    else{
         const updated = menu.filter((update) => {
         return update.category = foods;
  });
  displaymenuItems(updated);
 console.log(updated);
}
})

I get the all the links in the navbar using catgeory buttons and filter the category in the menu with filter function and stored the category in the updated variable.
am unable to load the cards when i clicked the all, starters, beverages, desserts link in the navbar. here is my html file