En la página de vista de mi carrito, puedo aumentar y disminuir la cantidad de productos haciendo clic en los botones + y - cuando el carrito tiene un producto. Cuando agrego más de un producto a mi carrito, el botón de aumento y disminución no funciona en ningún producto.

Funciona bien cuando solo hay un producto en mi carrito.

Al agregar más de un producto al carrito, el botón de aumento (+) y disminución (-) no funciona.

HTML

 {% for cart_product in cart %} <tr class="product-row"> <td> <figure class="product-image-container"> <a href="{{ cart_product.product.get_absolute_url }}" class="product-image"> <img src="{{ cart_product.product.product_img_1.url }}" alt="product" class="img-fluid"> </a> </figure> </td> <td> <div class="product-single-qty"> <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected"> <div class="minus-cart value-button" value="Decrease Value" pid="{{ cart_product.product.id }}">-</div> <span class="number">{{ cart_product.quantity }}</span> <div class="plus-cart value-button" value="Increase Value" pid="{{ cart_product.product.id }}">+</div> </div> </div> </td> <td class="text-right"> <span class="subtotal-price each_pro_subtotal">{{ cart_product.total_cost }}</span> </td> </tr> {% endfor %}

javascript

 $(".plus-cart").click(function(){ var id = $(this).attr("pid").toString(); var eml = this.parentNode.children[1]; $.ajax({ type : "GET", url : "/shop/pluscart", data : { prod_id : id }, success : function(data){ eml.innerText = data.quantity; each_subtotal = document.getElementsByClassName("each_pro_subtotal"); each_subtotal[0].innerText = data.each_pro_subtotal; document.getElementById("subtotal").innerText = data.subtotal; }, }) });