Not able to change textbox value on blur - laravel

Question

Good Afternoon...
I am trying to do the addition of textbox value and show in another textbox using onBlur but not able to do the same. Textbox are genrated using foreach loop as per ID. ( Ref. Attached Image)
For first textbox, the function gives the value but for next textboxes, not able to get the same.
My Modal Table Code.
<tbody>
#foreach ($buffalodata as $item )
<tr>
<td>{{$item->buffaloID}}</td>
<td><input type="number" id="eachmorningmilk" name="eachmorningmilk" value="00"></td>
<td><input type="number" id="eacheveningmilk" name="eacheveningmilk" value="00"></td>
<td><input type="text" id="eachtotalmilk" name="eachtotalmilk" value="00" readonly></td>
</tr>
#endforeach
</tbody>
Code for Function to run onblur
$("#eachmorningmilk").blur(function(){
eachbmorning = parseInt($("#addmilkbuffalo #eachmorningmilk").val());
eachbevening = parseInt($("#addmilkbuffalo #eacheveningmilk").val());
var eachbuffalototalmilk = eachbmorning + eachbevening;
document.getElementById('eachtotalmilk').value=eachbuffalototalmilk;
})
Thanks in Advance.

Answer 1

$("#eachmorningmilk").blur(function(){...in this statement you specify the id (eachmorningmilk) ..
right?
So what about the next two textbox id .. if you want the same effact on next two textboxs then you need to specify the function in textbox element like ..
$("#eacheveningmilk").blur(function(){
eachbmorning = parseInt($("#addmilkbuffalo #eachmorningmilk").val());
eachbevening = parseInt($("#addmilkbuffalo #eacheveningmilk").val());
var eachbuffalototalmilk = eachbmorning + eachbevening;
document.getElementById('eachtotalmilk').value=eachbuffalototalmilk;
})
And for the another one ..
This is the problem of your code in my point of view
Welcome.🙂