Update value of HTML when input value changes
<p>I am trying to update a total when the value of one of the factors changes. I have created a <a href="http://jsfiddle.net/aikaterine/dQKXt/" rel="nofollow">jsFiddle</a>and provided a comment on it (line 16). This is probably the easiest place to see the issue.</p>

<p>It's simple sums, so I have a table that looks something like this. </p>

<pre><code>Row 1  | 100 | 5 |
Row 2  | 200 | 10 |
Totals | 300 | 15 |
</code></pre>

<p>Table cells in Row 1 and Row 2 contain text fields. Table cells in the total row contain html. The id's and names of the div's / inputs are auto generated (please see jsFiddle link for example). </p>

<p>Everything works fine the first time I change the input amounts, but I am having a hard time setting the value of the original element to the new sum. When I update the field a second time, the calculation contemplates the original value - which throws my sums off. I have tried both the jQuery and javascript methods and have also tried with a specific id (not $(this)) all to no avail. I am new to javascript so am probably missing something simple.</p>

<p>My  javascript looks like this</p>

<pre><code>window.formTable = $('#def-inv-table');
$('input.form-text').change(function() {
  var currentId      = $(this).attr('id');
  var orgValue       = this.getAttribute('value');
  var newValue       = this.value;
  var changeAmount   = newValue - orgValue;
  var pieces         = currentId.split(/\s*\-\s*/g);
  var key            = pieces[1];
  var orgTotalString = window.formTable.find('#total-' + pieces[2]).html();
  var orgTotal       = Number(orgTotalString.replace(/[^0-9\.]+/g,""));
  var newTotal       = orgTotal + changeAmount;

  window.formTable.find('#total-' + pieces[2]).css("background", "blue");
  window.formTable.find('#total-' + pieces[2]).html(newTotal);

//Here is my problem. This is not updating. I have tried the javascript way
//with document.getElementbyId and the jQuery way. Neither sets the value.
  $(this).val(newValue);
  var testVal = $(this).val();
  //alert(testVal);
});
</code></pre>

<p>Please let me know if you want me to paste the html. I am leaving it out since it is in jsFiddle. </p>

<p>ADDING HTML</p>

<pre><code>&lt;form name="test-form" id="test-form"&gt;
  &lt;div id="def-inv-table"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="text" id="no-413-invreturned" name="investments[413][invreturned]" value="3000.00" class="form-text"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input type="text" id="no-413-commreturned" name="investments[413][commreturned]" value="23.42" class="form-text"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;

      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="text" id="no-414-invreturned" name="investments[414][invreturned]" value="1000.00" class="form-text"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input type="text" id="no-414-commreturned" name="investments[414][commreturned]" value="15.89" class="form-text"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td id="total-invreturned"&gt;4,000.00&lt;/td&gt;
        &lt;td id="total-commreturned"&gt;39.31&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;form&gt;
</code></pre>
