將兩個產品添加到購物車時，javascript/ajax 不起作用，如何解決？

Question

在我的購物車視圖頁面上，當購物車只有一種產品時，我可以通過單擊 + 和 - 按鈕來增加和減少產品數量。 當我將多個產品添加到我的購物車時，增加和減少按鈕對任何產品都不起作用。

當我的購物車中只有一種產品時工作正常。

將多個產品添加到購物車時，增加 (+) 和減少 (-) 按鈕不起作用。

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

Answer 1

您可以嘗試替換var eml = this.parentNode.children[1]; 和：

var eml = $(this).closest('span.number')[0];