having trouble changing product quantity in cart table. plain JS

Question

New to programming. I dynamically add products to cart table. I include product image, name, price and I have quantity span buttons. I can see that when quantity buttons are clicked correct item - id is logged in the console but quantity doesnt seem to change even though changequantity function seems correct. Code:

    listCartHTML.addEventListener('click', function(event) {
      let clickInstance = event.target;
      if (clickInstance.classList.contains('minus') || clickInstance.classList.contains('plus')) {
        let product_id = clickInstance.closest('.item').dataset.id;
        console.log("Product ID:", product_id);
        let type = 'minus';
        if (clickInstance.classList.contains('plus')) {
          type = 'plus';
        }
        changeQuantity(product_id, type);
      }
    })

    const changeQuantity = (product_id, type) => {
      let positionItemInCart = carts.findIndex((value) => value.product_id == product_id);
      if (positionItemInCart >= 0) {
        switch (type) {
          case 'plus':
            carts[positionItemInCart].quantity = carts[positionItemInCart].quantity + 1;
            break;
          default:
            let valueChange = carts[positionItemInCart].quantity - 1;
            if (valueChange > 0) {
              carts[positionItemInCart].quantity = valueChange;
            } else {
              carts.splice(positionItemInCart, 1);
            }
            break;
        }
      }
      addCartToMemory();
      addCartToHTML();
    }

    const addCartToHTML = () => {
      listCartHTML.innerHTML = '';
      let totalCost = 0;
      let totalQuantity = 0;
      if (carts.length > 0) {
        carts.forEach(cart => {
          totalQuantity = totalQuantity + cart.quantity;
          totalCost += cart.price * cart.quantity;
          let newCart = document.createElement('div');
          newCart.classList.add('item');
          newCart.dataset.id = cart.id;
          newCart.innerHTML = `
                            <div class="image">
                                <img src="${cart.image}" alt="${cart.name}">  
                            </div>
                            <div class="name">
                                ${cart.name}  </div>
                            <div class="price">
                                $${cart.price}  
                            </div>
                            <div class="quantity">
                                <span class="minus">-</span>
                                <span>${cart.quantity}</span>  
                                <span class="plus">+</span>
                            </div>`;
          listCartHTML.appendChild(newCart);
        });
      }
      iconCartSpan.innerText = totalQuantity;
      document.querySelector('.totalCost').textContent = `Total Cost: $${totalCost}`;
    };

I tried changing let product_id = clickInstance.closest('.item').dataset.id; in listCartHTML click event listener with parentelement.datased.id but then I have another issue when quantity change for different products in cart change only the first products quantity.