How to dynamically edit a table cell that affect another table cell?

I have a table that dynamically fills data obviously through a loop. It fills data as shown in the figure below.

As you can see above The table is filled including editable fields. What I need is, If I edit one cell I need to show the change in the right side cell which is the total.

Here's the code for the table.

<tr>
<td colspan="4">
<h4 class="ui header">
<i class="settings icon"></i>
<div class="content">
Loans
</div>
</h4>
</td>
</tr>
@for (int i = 0; i < Model.RecoveriesLoan.Count; i++)
{
@Html.HiddenFor(modelItem => Model.RecoveriesLoan[i].TXR_ABATEMENT_ID)
@Html.HiddenFor(modelItem => Model.RecoveriesLoan[i].TXR_TX_TYPE_ID)
@Html.HiddenFor(modelItem => Model.RecoveriesLoan[i].TXR_MEMBER_ID)
@Html.HiddenFor(modelItem => Model.RecoveriesLoan[i].TXR_SEQ_NO)
@Html.HiddenFor(modelItem => Model.RecoveriesLoan[i].TXR_RECORD_STATUS)
@Html.HiddenFor(modelItem => Model.RecoveriesLoan[i].TXR_RECEIVABLE_AMT)
<tr class="@(Model.RecoveriesLoan[i].TXR_RECEIVED_AMT < Model.RecoveriesLoan[i].TXR_RECEIVABLE_AMT ? "negative" : "positive")">
<td>
@Html.DisplayFor(modelItem => Model.RecoveriesLoan[i].MTX_TX_DESC)
</td>
@*<td>
@Html.DisplayFor(modelItem => Model.RecoveriesLoan[i].TXR_SEQ_NO)
</td>*@
<td id="LoanRecv">
@Html.DisplayFor(modelItem => Model.RecoveriesLoan[i].TXR_RECEIVABLE_AMT)
</td>
<td>
<div class="ui fluid icon input no-margine-bottom">
@Html.EditorFor(modelItem => Model.RecoveriesLoan[i].TXR_RECEIVED_AMT , new { @id = "LoanRec", @class="Loan" })
</div>
</td>
<td id="LoanUR">
@{decimal ur = Model.RecoveriesLoan[i].TXR_RECEIVABLE_AMT - Model.RecoveriesLoan[i].TXR_RECEIVED_AMT;}
@ur
</td>
</tr>
}

Here's how I tried to implement it using javascript:

<script>
$('#RecoveriesCont_0__TXR_RECEIVED_AMT').change(function () {
var conRecv = $('#RecoveriesCont_0__TXR_RECEIVABLE_AMT').val();
var conRec = $('#RecoveriesCont_0__TXR_RECEIVED_AMT').val();
var conUR = 0;
console.log(conRecv);
conUR = conRecv - conRec;
console.log("conUR:", parseFloat(conUR).toFixed(2));
$('#ContUR').val(parseFloat(conUR).toFixed(2));
});
$('#LoanRec').change(function () {
var loanRecv = $('#LoanRecv').val();
var loanRec = $('#LoanRec').val();
var loanUR = 0;
loanUR = loanRecv - loanRec;
$('#LoanUR').val(loanUR.toFixed(2));
});
</script>

As you can see I have only tried to achieve only for the first row of the table. But I need to edit all the rows accordingly. The above code didn't work at all.

How do I achieve this using javascript. Help would be appreciated.

Get inputs by their class selectors, use this keyword to get this certain input's value, traverse to parent and find cell you need by it's class.

You also need to get rid of duplicated ids as every one of them should be unique to the page.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(".input").change(function() {
var inputVal = parseInt($(this).val());
var anotherVal = parseInt($(this).closest("tr").find(".first").text());
var sum = anotherVal - inputVal;
$(this).closest("tr").find(".third").text(sum)
})

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="first">100</td>
<td class="second"><input type="text" class="input"></td>
<td class="third">0</td>
</tr>
</table>

<!-- end snippet -->