I'm working on an e-commerce store, it has a cart page where there are quantity increase and decrease buttons for every product added to the cart, I'm trying to reload the page every time someone hits any of these buttons.

So when I have only one product in the cart, the reloading works fine when clicking on the buttons, but when I have more than one product in the cart and I try to increase or decrease the quantity of the second or the third product, it doesn't reload. It seems reloading only works with the first product that has been added, any clue why this is happening? I'm guessing this has something to do with DOM, but how do I fix this?

{% for item in items %}
    <div >
        <p id="quantity-style" >{{item.quantity}}</p>
        <div >
            <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();
});

CodePudding user response：

An id should only be assigned once. Currently, you are trying to assign the same pair of ids (reload_arrow_up and reload_arrow_down) to every single product. This is probably why the JavaScript functions only work for the first product. Instead, do it as it's explained here, by using class instead of id: The class of several HTML objects can be the same, which is what you need here.