How to disable multiple JavaScript buttons when a condition become true?

I have an Increment button as well as decrement button in my cart page. I want my decrease button(-) to be disabled when the quantity equals to 1 and it should be automatically enable when the quantity become more than 1. Moreover, no greater than 10 products allowed to a user so, the increase button must be again disabled when the quantity equals to 10.

Here's my code, and it working fine when my cart contains only one row of item. But when user adds multiple items to the cart this code is not working as I expected. I mean, the given IF conditions are not evaluating to the rest row of items.

<section>
    <div class="container">
        <table class="table mt-5">
            <thead>
                <tr>

                    <th scope="col">Item</th>
                    <th scope="col">Title</th>
                    <th scope="col">Price</th>
                    <th scope="col">Quantity</th>

                </tr>
            </thead>
            <tbody>
                
                <tr>

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


                    <td>
                        <button class="btn btn-info mr-3 cart-item-count " id="button(-)"
                            
       onclick="changeQuantity('','','',-1)">- 
  </button>
                        <span id=""></span>
                        <button class="btn btn-info ml-3 cart-item-count" id="button(+)"
                            
      onclick="changeQuantity('','','',1)">+</button>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger">Remove</button>
                    </td>
                </tr>
                
            </tbody>
        </table>
        <hr>
        <div class="float-right pr-5 pt-5">
            <h3 style="text-align:center">Total Rs. <span id="total"></span></h3>
            <a href="/place-order" class="btn btn-primary mt-3" style="width:100%">Place Order</a>
        </div>
    </div>
    </section>
    
    <h1 id="Quantity" hidden></h1>
    
    <script>

    let Quantity = document.getElementById('Quantity').innerText

    //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

                location.reload()

            }
        })
    }
</script>

Current Output

As you can see the marked area shows my current code is working fine for the first row of item. But the IF conditions are not applied to the rest.

Please help me if you understand my concern.

Thank You : )