How to disable and enable javascript buttons according to a specific condition?

Question

I want to disable the (-) button when this page is loaded and the value between these buttons are equal to 1.

1)hbs code

<tbody>

    {{#each products}}

     <tr>

     <h1 id="Quantity" hidden>{{this.quantity}}</h1>

     <td><img src="/product-images/{{this.product._id}}.jpg" style="width:70px;height:70px" alt=""> 
  </td>

     <td>{{this.product.Name}}</td>

     <td>Rs.{{this.product.Price}}</td>

     <td>

     <button class="btn btn-info mr-3 cart-item-count" id="button(-)" 
   onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',-1)">-</button>
 
     <span id="{{this.product._id}}">{{this.quantity}}</span>

     <button class="btn btn-info mr-3 cart-item-count" id="button(-)" 
    onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',1)">+</button>

     <td>

     <button type="button" class="btn btn-danger">Remove</button>

     </td>

     </tr>

     {{/each}}

     </tbody>

2)Array of products

3)Code used for button disabling and enabling.

 let Quantity = document.getElementById('Quantity').innerHTML
    console.log(Quantity)
    if (Quantity == 1) {
        document.getElementById('button(-)').disabled = true
    } else {
        document.getElementById('button(-)').disabled = false
    }
    
    function changeQuantity(cartId, proId, userId, count) {
        count = parseInt(count)
        let quantity = parseInt(document.getElementById(proId).innerHTML)
        let qty = quantity + count
        console.log(qty)
        if (qty > 1 ) {
            document.getElementById('button(-)').disabled = false
        } else if (qty == 1 || qty==10) {
            document.getElementById('button(-)').disabled = true
        }

        if(qty==10){
            document.getElementById('button(+)').disabled = true
        }else{
            document.getElementById('button(+)').disabled = false
        }

        $.ajax({
            url: '/change-product-quantity',
            data: {
                cart: cartId,
                product: proId,
                user: userId,
                count: count,
                quantity: qty
            },
            method: 'post',
            success: (response) => {

                document.getElementById(proId).innerHTML = quantity + count
                document.getElementById('total').innerHTML = response.total

            }
        })
    }

Note:

Above code is working fine when the cart page having only one set of product. But, in case of multiple product lists(as you can see in the image given above)it's not working as I expected. In other words, I want to control each product's buttons separately without overriding one another.

How to do that ?

Answer 1

Identidying each products using unique ids would be help to solve this issue.