[FIXED] problem with updating counter with jquery inside loop with django

Issue

everything is working correctly, except when clicking the increment or decrement buttons, only the last product on the cart is updated!!!, for other carts, I can update the value manually and click the button it will updated without any problem !!!

this is the code for .html in django

{% for item in cart %}
                            <div class="card rounded-3 mb-4 ">
                                <div class="card-body p-4">
                                    <div class="row d-flex justify-content-between align-items-center">
                                        <div class="col-md-2 col-lg-2 col-xl-2">
                                            <img
                                                    src="{{ item.product.product_image.url }}"
                                                    class="img-fluid rounded-3" alt="Cotton T-shirt">
                                        </div>
                                        <div class="col-md-3 col-lg-3 col-xl-3">
                                            <p class="lead fw-normal mb-2">{{ item.product.name }}</p>
                                            <p><span class="text-muted">
                    {% if item.product.is_service %}
                        Service
                    {% else %}
                        Product
                    {% endif %}
                </span> <span class="text-muted">
                                        </div>
                                        <div class="col-md-3 col-lg-2 col-xl-2 d-flex product_data">
                                            <input type="hidden" value="{{ item.product_id }}" class="prod_id">
                                            {% csrf_token %}
                                            {% if item.product.is_service == False %}
                                                {% if item.product.quantity >= item.product_quantity %}

                                                    <div class="container">
                                                        <div class="row">
                                                            <div class="col-lg-2">
                                                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <button type="button" id="quantity-left-minus"
                                                class="  changeQuantity btn btn-primary btn-number"
                                                data-type="minus">
                                          <span class="glyphicon glyphicon-minus"></span>
                                        </button>
                                    </span>
                                                                    <input type="number" id="quantity"
                                                                           class=" align-items-center qty-input"
                                                                           value="{{ item.product_quantity }}">
                                                                    <span class="input-group-btn">
                                        <button type="button" id="quantity-right-plus"
                                                class=" changeQuantity btn btn-primary btn-number"
                                                data-type="plus">
                                            <span class="glyphicon glyphicon-plus"></span>
                                        </button>
                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% else %}
                                                    <h3>Out of Stock</h3>
                                                {% endif %}
                                            {% endif %}

                                        </div>
                                        <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
                                            <h5 class="mb-0">$ {{ item.product.selling_price }}</h5>
                                        </div>
                                        <div class="col-md-1 col-lg-1 col-xl-1 text-center">
                                            <a href="#!" class="text-danger delete-cart-item">Remove</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}

and here jquery code:

$(document).ready(function () {

    var quantitiy = 0;
    $('#quantity-right-plus').click(function (e) {

        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        var quantity = parseInt($('#quantity').val());

        // If is not undefined

        $('#quantity').val(quantity + 1);


        // Increment

    });

    $('#quantity-left-minus').click(function (e) {
        console.log("jjjj")
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        var quantity = parseInt($('#quantity').val());

        // If is not undefined

        // Increment
        if (quantity > 0) {
            $('#quantity').val(quantity - 1);
        }
    });




//    change the quantity in the cart
     $('.changeQuantity').click(function (e) {
     e.preventDefault();
     var product_id = $(this).closest('.product_data').find('.prod_id').val()
     var product_qty = $(this).closest('.product_data').find('.qty-input').val()
     var token = $('input[name=csrfmiddlewaretoken]').val()

    $.ajax({
        method: 'POST',
        url: '/update_cart/',
        data: {
            'product_id' : product_id,
            'product_qty' : product_qty == null ? 1 : product_qty,
            csrfmiddlewaretoken: token

        },
        success: function(response) {
            console.log(response.status)
            alertify.success(response.status)
        }
    })
})



});

and here the python code

def update_cart(request):
    if request.method == 'POST':
        prod_id = int(request.POST.get('product_id'))
        if Cart.objects.filter(user=request.user, product_id=prod_id):
            prod_qty = int(request.POST.get('product_qty'))
            cart = Cart.objects.get(product_id=prod_id, user=request.user)
            cart.product_quantity = prod_qty
            cart.save()
            return JsonResponse({'status': "Updated Successfully"})
    return redirect('/')

Solution

Change right-button, left-button, input-quantity like this.

<button type="button" id="{{ item.product_id }}-right-plus" class="quantity-right-plus changeQuantity btn btn-primary btn-number" data-type="plus">

<button type="button" id="{{ item.product_id }}-left-minus" class="quantity-left-minus changeQuantity btn btn-primary btn-number" data-type="minus">

<input type="number" id="{{ item.product_id }}-quantity" class="align-items-center qty-input" value="{{ item.product_quantity }}">

and change the jQuery code.

$('.quantity-right-plus').click(function (e) {

    // Stop acting like a button
    e.preventDefault();

    // Get the element ID
    const elementId = $('this').attr('id').split('-')[0]

    // Get the field name
    const quantity = parseInt($(`#{elementId}-quantity`).val());

    // If is not undefined

    $(`#{elementId}-quantity`).val(quantity + 1);


    // Increment

});

$('.quantity-left-minus').click(function (e) {

    // Stop acting like a button
    e.preventDefault();

    // Get the element ID
    const elementId = $('this').attr('id').split('-')[0]

    // Get the field name
    const quantity = parseInt($(`#{elementId}-quantity`).val());

    // If is not undefined

    // Increment
    if (quantity > 0) {
        $(`#{elementId}-quantity`).val(quantity - 1);
    }
});

Answered By - seokmin-kang