I'm trying to select all the button with the class ".add-to-cart" using the querySelectorAll function but I am not able to generate the MouseEvent in the console.

HTML

<section class="hero py-16">
  <div class="container mx-auto flex items-center justify-between">
    <div class="w-3/4"> 
      <h6 class="text-lg"> <em> Feeling Hungry? </em></h6>
      <h1 class="text-6xl font-bold">What are you waiting for?</h1>
      <button class="btn-primary px-6 py-2 rounded-full text-white font-bold mt-4">Order Now</button> 
    </div>
    <div class="w-1/2 "><img src="/img/Sloppy_Joes_hero.png" alt=""> </div>
  </div>
</section>
<section class="menu container mx-auto py-8">
  <h1 class="text-xl font-bold mb-8"> All Burgers</h1>
  <div class="grid grid-cols-4 gap-x-12 gap-y-16">
    <% burgers.forEach(function(burger){ %>
      <div class="w-64">
        <img class="h-40 mb-4 mx-auto" src="/img/<%= burger.image %>" alt="item-static">
        <div class="text-center">
          <h2 class="mb-4 text-lg"><%= burger.name %></h2>
          <span class="item-color py-1 px-4 rounded-full uppercase text-xs"> <%= burger.size %></span>
          <div class="flex items-center justify-around mt-6">
            <span class="font-bold text-lg"> ₹<%= burger.price %> </span>
            <button data-burger="<%= JSON.stringify(burger)%>" class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
              <span>+</span>
              <span class="ml-4">Add</span>
            </button>
          </div>
        </div>
      </div>
    <% })%>
    

  </div>
</section>

JavaScript

let addToCart = document.querySelectorAll('.add-to-cart');

addToCart.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    let burger = btn.dataset.burger
    console.log(burger)
  })
})

I am using laravel-mix and I did check if the files are compiling, and they are but I am unable to see the event occur. Thank you so much in advance.