Страница не перезагружается на целевых элементах, кроме первой сессии

Я работаю над магазином электронной коммерции, у него есть страница корзины, где есть кнопки увеличения и уменьшения количества для каждого товара, добавленного в корзину, я пытаюсь перезагрузить страницу каждый раз, когда кто-то нажимает любую из этих кнопок.

Когда у меня только один товар в корзине, перезагрузка работает нормально при нажатии на кнопки, но когда у меня более одного товара в корзине и я пытаюсь увеличить или уменьшить количество второго или третьего товара, он не перезагружается. Похоже, что перезагрузка работает только с первым добавленным товаром, не подскажете, почему так происходит? Я предполагаю, что это связано с DOM, но как это исправить? 

{% 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}}" id="reload_arrow_up" data-action="add" src="{% static 'shop/images/arrow-up.png' %}">

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


$('#reload_arrow_down').click(function() {
    location.reload();
});


$('#reload_arrow_up').click(function() {
    location.reload();
});

Каждый id должен быть назначен только один раз. В настоящее время вы пытаетесь присвоить одну и ту же пару id (reload_arrow_up и reload_arrow_down) каждому отдельному товару. Возможно, поэтому функции JavaScript работают только для первого товара. Вместо этого сделайте все так, как объясняется здесь , используя class вместо id: class нескольких объектов HTML может быть одинаковым, что вам и нужно здесь.

Вернуться на верх