There seems to be an issue where the quantity is only being changed in the first product, even if I click on the arrow of the second product. The changes are reflected in the quantity of the first product instead. cart.js
var changeQ = document.getElementsByClassName('increase')
for (i = 0; i < changeQ.length; i++) {
changeQ[i].addEventListener('click', function(){
var productId = this.dataset.product
var action = this.dataset.action
console.log('productId:', productId, 'Action:', action)
if (action == 'plus'){
Increase(productId, action)
}
else if(action=='minus'){
Decrease(productId, action)
}
})
}
function Increase(productId,action){
console.log('Increase')
var quantity = Number(document.getElementById("quantity").value);
quantity = quantity+1;
document.getElementById("quantity").value = quantity;
console.log(quantity);
}
function Decrease(productId,action){
var quantity = Number(document.getElementById("quantity").value);
console.log('Decrease')
quantity = quantity-1;
document.getElementById("quantity").value=quantity;
}
template
<div class="counter">
<div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
<div class="quantity"><input type="number" id="quantity" value="1"></div>
<div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
</div>
These code snippets are used in a Django project. What steps can I take to address this issue and ensure that the quantity changes are applied to the correct products? Any assistance would be greatly appreciated!