我正在嘗試構(gòu)建一個(gè)簡(jiǎn)單的購(gòu)物車(chē)。我想在單擊添加按鈕時(shí)將整個(gè)項(xiàng)目添加到購(gòu)物車(chē)中。項(xiàng)目看起來(lái)像這樣（有6個(gè)不同的名稱(chēng)和價(jià)格現(xiàn)在，我正在努力將名稱(chēng)添加到購(gòu)物車(chē)中（我將對(duì)價(jià)格使用相同的過(guò)程），但是當(dāng)我單擊添加按鈕時(shí)，它會(huì)添加最后一個(gè)項(xiàng)目的名稱(chēng)，而不是我正在單擊的項(xiàng)目的名稱(chēng)。如何解決此問(wèn)題？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>