https://i.sstatic.net/cOXMh.png
Upon loading this page, I am looking to deactivate the (-) button if the value between these buttons is set 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
https://i.sstatic.net/nLoqv.png
3)Code for Enabling and Disabling Buttons
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:
The provided code behaves correctly when there is only one product on the cart page. However, it does not work as expected when multiple products are listed. How can I individually control each product's buttons without affecting others?
Any suggestions on how to achieve this task effectively would be appreciated.