我正在嘗試構建一個簡單的購物車。我想在單擊添加按鈕時將整個項目添加到購物車中。項目看起來像這樣（有6個不同的名稱和價格現在，我正在努力將名稱添加到購物車中（我將對價格使用相同的過程），但是當我單擊添加按鈕時，它會添加最后一個項目的名稱，而不是我正在單擊的項目的名稱。如何解決此問題？const cart = document.querySelector(".cart");const productName = document.querySelectorAll(".product-name");const productPrice = document.querySelector(".product-price");const addBtn = document.querySelectorAll(".add");addBtn.forEach(button => {  button.addEventListener("click", addToCart);})//Add to cartfunction addToCart(e) {  e.preventDefault();  //Create DIV  const item = document.createElement("div");  item.classList.add("item");  //Add name  const name = document.createElement("h2");  name.classList.add("product-name");  productName.forEach(productN => {    name.innerText = productN.innerText;  })  item.appendChild(name);  cart.appendChild(item);}<div class="product">  <h2 class="product-name">Beer</h2>  <h3 class="product-price">$4</h3>  <button class="add">Add to cart</button></div><div class="product">  <h2 class="product-name">Burger</h2>  <h3 class="product-price">$12</h3>  <button class="add">Add to cart</button> </div><section class="section">        <h2 class="text-center">Cart</h2>        <div class="cart"></div>    </section>