Обновление только целевого элемента с помощью ajax

Я пытаюсь обновить страницу корзины с помощью ajax, когда кто-то увеличивает или уменьшает количество продуктов, моя логика просмотра в порядке. Моя проблема, как я могу предположить, заключается в нацеливании класса "ajax_updater", как только я нажимаю на кнопки количества, ajax работает, но вместо того, чтобы нацелиться только на определенный продукт, он нацеливается на количество всех продуктов с тем же классом ".quantity-style" и изменяет значение в соответствии с целевым продуктом, поэтому, если количество для продукта A равно 4 после ClickEvent, количество для продуктов B, D, F становится целевым и изменяется на 4 тоже, что может быть решением?

{% 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');
});

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