I wrote up a code that displays food items on the screen with the help of map method that returns a new array. And within the returned array, is a button (i.e add to list button), which will also be displayed. I was planning to attach some JS functionality to it so that when a user clicked on the button, the item will be added on a list. But as trial to see if the buttons work, I added only console log to them. And when I click on the button, nothing happens. And no error whatsoever shows up on the console. I tried finding the bug, but I just can't see it. Can you guys check what's wrong with the code? I would really appreciate it.

Here's the code:

 const menu = [
    {
      id: 1,
      title: "GUNPOWDER GOBHI",
      category: "Small Plates",
      price: 16.99,
      img: "sp1.png",add
      desc: `Crispy Cauliflower, Spicy Lentil Dust`,
    },
    {
      id: 2,
      title: "SHRIMP KOLIWADA",
      category: "Small Plates",
      price: 13.99,
      img: "sp2.jpg",
      desc: `Crispy Popcorn Style Fritters, Pickled Mango Sauce`,
    },
    {
      id: 3,
      title: "GHEE ROAST CHICKEN WINGS",
      category: "Small Plates",
      price: 6.99,
      img: "sp3.jpg",
      desc: `Kundapur Chicken Masala`,
    },
]

const container = document.querySelector('.container'); //This div will contained the food items to be displayed
const addBtns = document.querySelectorAll('.add-btn');

window.addEventListener("DOMContentLoaded", function () {
    diplayMenuItems(menu);
  });
  
  function diplayMenuItems(menuItems) {
    let displayMenu = menuItems.map(function (item) {
  
      return `<article class="menu-item">
            <img src=${item.img} alt=${item.title} class="photo" />
            <div class="item-info">
              <h4>${item.title}</h4>
              <h4 class="price">$${item.price}</h4>
              <p class="item-text">
                ${item.desc}
              </p>
              <button class="add-btn">Add To List</button> //When I add JS to this button, it'll not work for some reason
             </div>
          </article>`;
    });
    displayMenu = displayMenu.join("");
  
    container.innerHTML = displayMenu;
  }

  addBtns.forEach(function(btn){
    btn.addEventListener('click', function(){
        console.log("hi");

    });

  });