Not able to change textbox value on blur

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.