I am creating a shopping cart page and the quantity part, of all inputs only one of the inputs works and it's value changes where am i doing wrong??
$('.minus').attr('id', 'minus');
$('.plus').attr('id', 'plus');
const minus = document.getElementById('minus')
const plus = document.getElementById('plus')
plus.addEventListener("click", () => {
var count = document.querySelector('[title="Qty"]').value;
count++;
document.querySelector('[title="Qty"]').value = count;
});
minus.addEventListener("click", () => {
var count = document.querySelector('[title="Qty"]').value;
if(count >1){
count--;
document.querySelector('[title="Qty"]').value = count;
}
});
<div class="padding-td">
<button class="btn border text-danger minus"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
</svg>
</button>
<input type="number" title="Qty" value="<?php echo $cart_item["quantity"]?>" min="1" class="form-control w-25 d-inline-block input">
<button class="btn border text-danger plus"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</button>
</div>