Estoy tratando de seleccionar todos los botones con la clase ".add-to-cart" usando la función querySelectorAll pero no puedo generar el MouseEvent en la consola.

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) }) })

Estoy usando laravel-mix y verifiqué si los archivos se están compilando, y lo están, pero no puedo ver que ocurra el evento. Muchas gracias de antemano.