title: HTML MVC Calculated field for Each Table Row
body: <p>I am trying to calculate the Return Amount column in an MVC HTML table using java script.  I am able to get it to calculate the first row of the table but not the remaining rows.  After it is calculated I would like to pass it back to my controller.  Can someone help me with the java script code?  I have tried to search the internet and can't find my exact scenario.</p>
  <p>See screenshot of my current site and that the first row's Return Amount column was automatically calculated, but not the second row. Thank you!</p>
  <p><a href="https://i.stack.imgur.com/m25K0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m25K0.png" alt="Current Result" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@section scripts{
  
      &lt;script&gt;
  
  
  
          function calculate() {
              //Fields that are used for calculations
              $('tr').each(function () {
                  var casecount = parseFloat($('#return_qty').val());
  
                  var price = parseFloat($('#unit_price').val());
  
  
  
                  //Calculations
                  var extcost = casecount * price;
  
  
                  //set results to the updating fields
                  $('#return_extended_price').val(extcost.toFixed(2));
              })
          }
  
          $(document).ready(function () {
              //calculate();
              //calculate everytime these following fields change
              $('#return_qty').each($(this).change(calculate));
  
          });
          
      &lt;/script&gt;
       
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;tbody&gt;
                          @for (var i = 0; i &lt; Model.Items.Count; i++)
                          {
                              &lt;tr class="trRow1"&gt;
                                  &lt;td&gt;
                                      @Html.HiddenFor(m =&gt; m.Items[i].InvoiceLineUID, new { @style = "width:0px;" })
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      @Html.HiddenFor(m =&gt; m.Items[i].OrderNo, new { @style = "width:0px;" })
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      @Html.HiddenFor(m =&gt; m.Items[i].OtherCharge, new { @style = "width:0px;" })
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      @Html.TextAreaFor(m =&gt; m.Items[i].ItemId, new { @readonly = "readonly", @class = "form-control", @style = "width:100px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].ItemId&lt;/td&gt;*@
  
                                  &lt;td&gt;
                                      @Html.TextAreaFor(m =&gt; m.Items[i].ItemDesc, new { @readonly = "readonly", @class = "form-control", @dir = "ltl", @style = "width:400px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].ItemDesc&lt;/td&gt;*@
  
                                  &lt;td&gt;
                                      @Html.TextAreaFor(m =&gt; m.Items[i].UOM, new { @readonly = "readonly", @class = "form-control", @dir = "ltl", @style = "width:55px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].UOM&lt;/td&gt;*@
                                  &lt;td&gt;
                                      @Html.TextAreaFor(m =&gt; m.Items[i].UnitPrice, new { id = "unit_price", @readonly = "readonly", @class = "form-control", @dir = "rtl", @style = "width:100px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].UnitPrice&lt;/td&gt;*@
                                  &lt;td&gt;
                                      @Html.TextAreaFor(m =&gt; m.Items[i].ExtendedPrice, new { @readonly = "readonly", @class = "form-control", @dir = "rtl", @style = "width:100px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].ExtendedPrice&lt;/td&gt;*@
                                  &lt;td&gt;
                                      @Html.TextAreaFor(m =&gt; m.Items[i].Qty, new { @readonly = "readonly", @class = "form-control", @dir = "ltl", @style = "width:100px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].Qty&lt;/td&gt;*@
                                  &lt;td&gt;
                                      @Html.TextBoxFor(m =&gt; m.Items[i].ReturnQty, new { id = "return_qty", @class = "form-control", @dir = "rtl", @style = "width:100px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].ReturnQty&lt;/td&gt;*@
                                  &lt;td&gt;
                                      @Html.TextBoxFor(m =&gt; m.Items[i].ReturnExtPrice, new { id = "return_extended_price", @readonly = "readonly", @class = "form-control", @dir = "ltl", @style = "width:100px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].ReturnExtPrice&lt;/td&gt;*@
                                  &lt;td&gt;
                                      @Html.TextBoxFor(m =&gt; m.Items[i].Note, new { @class = "form-control", @dir = "ltl", @style = "width:1000px;" })
                                  &lt;/td&gt;
                                  @*&lt;td&gt;@Model.Items[i].Note&lt;/td&gt;*@
  
                              &lt;/tr&gt;
                          }
                      &lt;/tbody&gt;</code></pre>
  </div>
  </div>
  </p>