Update only targeted element with ajax

I'm trying to update my cart page with ajax when someone increases or decreases the quantity of the products, my view logic is fine. My issue as I can infer is targeting the class "ajax_updater", as soon as I hit the quantity buttons ajax works, but instead on just the specific product, it targets all the products' quantity with the same class ".quantity-style" and changes the value as per the targeted product, so, if the quantity for product A is 4 after ClickEvent, the quantity for product B, D, F gets targeted and changed to 4 too, what could be a solution?

{% for item in items %}
    <div class="quantity">
        <p id="quantity-style" class="quantity-style">{{item.quantity}}</p>
        <div class="quantity-arrows">
            <img data-product="{{item.product.id}}" class="ajax_updater" data-action="add" src="{% static 'shop/images/arrow-up.png' %}">

            <img data-product="{{item.product.id}}" class="ajax_updater" data-action="remove" src="{% static 'shop/images/arrow-down.png' %}">
        </div>          
    </div>
{% endfor %}


function update_arrow() {
    $.ajaxSetup ({
        cache: false
    });
    var spinner = '<i class="fas fa-circle-notch fa-spin" style="font-size:15px;" alt="loading" ></i>';

    $(".quantity-style").html(spinner).load(update_quantity_url);
    console.log(update_arrow_url);
}

$('.ajax_updater').click(function () {
    update_arrow();
    console.log('hit hit');
});

You have to specify which element to update, an easy way to do this is to pass the element to update in the function.

function update_arrow(container) {
    $.ajaxSetup ({
        cache: false
    });
    var spinner = '<i class="fas fa-circle-notch fa-spin" style="font-size:15px;" alt="loading" ></i>';

    container.find(".quantity-style").html(spinner).load(update_quantity_url);
    console.log(update_arrow_url);
}

$('.ajax_updater').click(function () {
    update_arrow($(this).closest('.quantity'));
    console.log('hit hit');
});
Back to Top