on adding the other products to cart, the price and name of product picked is the first one

Question

 const buyBtn = document.querySelectorAll('.btnBuy'); const itemDesc = document.querySelector('.detail'); const priceDesc = document.querySelector('.price'); for (let counter = 0; counter < buyBtn.length; counter++) { buyBtn[counter].addEventListener('click', function() { getPrice() }) } const getPrice = function() { const getPrice = function() { const prices = priceDesc.textContent console.log(prices); } getPrice() }

 body { background-color: cornsilk; }.items-1 { margin-top: 20px; margin-left: 10%; }.items-2 { margin-top: -397px; margin-left: 30%; }

 <div class="items-1"> <img id="one" src="images/shoe chair.jpg" width="250px" height="300px" alt=""> <div class="desc"> <label class="detail">Antique Sofa</label> <br><br> <label class="price">$500</label><br><br> <input class="btnBuy" type="button" value="Buy"> </div> </div> <div class="items-2"> <img id="one" src="images/princess.jpg" width="250px" height="300px" alt=""> <div class="desc"> <label class="detail">Princess</label> <br><br> <label class="price">$700</label><br><br> <input class="btnBuy" type="button" value="Buy"> </div> </div>

Answer 1

Here:

const buyBtns = document.querySelectorAll('.btnBuy');
for (const buyBtn of buyBtns) {
  buyBtn.addEventListener('click', getPrice);
}
function getPrice(event){
    const parent = event.target.parentElement;
    const itemDesc = parent.querySelector('.detail');
    const priceDesc = parent.querySelector('.price');
    const prices = priceDesc.textContent;
    console.log({itemDesc,priceDesc,prices});
}