I am working on a personal project, just practicing on my own and getting to know and familiarized with the language.I am trying to learn by doing so I am creating a shopping cart and I came across a situation that I can not find a proper solution.

I have a list on my shopping cart already rendered of n items. When I 'click' on a plus button to add quantity to an item, it only adds to the quantity to the item that is first on the list and the 'price' of the second item.

Thank you in advance!

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

``