I have this loop, The id is unique. When I try to increment it is working for only one input field. How can I increment and decrement using unique id?
@forelse($allproduct as $key=>$data)
<tr>
<td data-label="@lang('Date')">
<div class="quantity col-md-8" style="display:flex; ">
<input type="text" value="" class="form-control req amnt display-inline" id="qtyid[{{$data->product_id}}]" min="0">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty" onclick="incrementValue()">+</div>
<div class="quantity-button quantity-down qty" onclick="decrementValue()">-</div>
</div>
</div>
</td>
</tr>
@endforelse
Javascript
function incrementValue()
{
var value = parseInt(document.getElementById("qtyid").value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('qtyid').value = value;
}
function decrementValue()
{
var value = parseInt(document.getElementById('qtyid').value, 10);
value = isNaN(value) ? 0 : value;
value--;
if(value == -1) {
value = 0;
}
document.getElementById('qtyid').value = value;
}
I suggest you use an approach that doesn't need IDs.
function incrementValue(e)
{
// use the quantity field's DOM position relative to the button that was clicked
const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
var value = parseInt(qty.value, 10);
value = isNaN(value) ? 0 : value;
value++;
qty.value = value;
}
function decrementValue(e)
{
const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
var value = parseInt(qty.value, 10);
value = isNaN(value) ? 0 : value;
value--;
if(value == -1) {
value = 0;
}
qty.value = value;
}@forelse($allproduct as $key=>$data)
<tr>
<td data-label="@lang('Date')">
<div class="quantity col-md-8" style="display:flex; ">
<input type="text" value="" class="form-control req amnt display-inline" min="0">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty" onclick="incrementValue(event)">+</div>
<div class="quantity-button quantity-down qty" onclick="decrementValue(event)">-</div>
</div>
</div>
</td>
</tr>
@endforelse