Estoy trabajando en un proyecto personal, solo practico por mi cuenta y estoy conociendo y familiarizándome con el idioma. Estoy tratando de aprender haciendo, así que estoy creando un carrito de compras y me encontré con una situación en la que no puedo encontrar un adecuado. solución.

Tengo una lista en mi carrito de compras ya renderizada de n artículos. Cuando 'hago clic' en un botón más para agregar cantidad a un artículo, solo se agrega la cantidad al artículo que está primero en la lista y el 'precio' del segundo artículo.

¡Gracias de antemano!

 function renderCarrito(){ // carritoEl.innerHTML = ""; while(carritoEl.firstChild){ carritoEl.removeChild(carritoEl.firstChild) }; carrito.forEach((item) =>{ carritoEl.innerHTML += ` <li class="buyItem"> <img src=${item.image}> <div class="productCartInfo"> <h5 class="prdTitle">${item.title}</h5> <h6>${item.price}</h6> <div class="qnty"> <div> <button class="mbtn">-</button> <span class="countOfProduct">${item.cantidad}</span> <button class="pbtn">+</button> </div> <div><i class="fas fa-times-circle dltProduct" data-id="${item.id}"></i></div> </div> </div> </li> ` const plusBtn = document.querySelectorAll('.pbtn'); const minusBtn = document.querySelectorAll('.mbtn'); const count = document.querySelector('.countOfProduct'); plusBtn.forEach(pbtn =>{ pbtn.addEventListener('click', () => { item.cantidad++; count.innerHTML = item.cantidad; carritoSumaTotal(); })}); }) carritoSumaTotal(); } ``