javascript/ajax not working when add two product to cart, how to solve this?

Question

On my cart view page, I can increase and decrease product quantity by clicking + and - button when the cart has one product. When I add more than one product to my cart increase and decrease button does not work at any product.

Working Fine when only one product is in my cart.

When adding more than one product to the cart increase(+) and decrease(-) button doesn't work.

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

You can try to replace var eml = this.parentNode.children[1]; with:

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