Change quantity of product in django ecommerce website? DJANGO

It’s not giving an error. The quantity is being changed only in the first product, even if when I press arrow of second product, the quantity of first product is being changed.
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>

It’s in Django. So what can I do to indicate the specific product. Can someone help me to solve this problem, please!