title: JQuery: form to calculate total of input fields... but several instances of this form on the same page
body: <p>I've spent more than 20 hours on Stackoverlfow to find a solution to my problem (trying to combine different solutions), but I'm still stuck and definitely need your help!</p>
  
  <p>Basically, I have a simple form with 3 "amount" input fields, and a "total amount" field (sum of the 3 amounts).</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;table border="1"&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Amount 1&lt;/td&gt;
          &lt;td&gt;&lt;input class="amount" type="text"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
       &lt;tr&gt;
          &lt;td&gt;Amount 2&lt;/td&gt;
          &lt;td&gt;&lt;input class="amount" type="text"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Amount 3&lt;/td&gt;
          &lt;td&gt;&lt;input class="amount" type="text"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Total Amount&lt;/td&gt;
          &lt;td&gt;&lt;span class="total"&gt;0&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>Then the working JQuery code:</p>
  
  <pre><code>$(document).ready(function(){           
          $('input').each(function() {
              $(this).keyup(function(){   
                  calculateTotal();
              });
          });
      });
  
      function calculateTotal() {
          var sum = 0;
          $('input').each(function() {
              if(!isNaN(this.value) &amp;&amp; this.value.length!=0) {
                  sum += parseFloat(this.value);
              }
          });
  
          $(".total").html(sum.toFixed(2));
      }
  </code></pre>
  
  <p>However I want to use several instances of the same form within the same page, and I'm trying to have only one "general" JQuery function like my current one, that could work for any form, even on the same page, without mixing fields between forms.</p>
  
  <p>Basically, a function that says "each time an input field is updated, recalculate the total amount and put it in the total field of the CURRENT form/table"</p>
  
  <p>I tried different ways, especially by surrounding the table with <code>&lt;div&gt;</code> then find it through "<code>currentdiv = $(this).prev("div");"</code> then loop through "current div" using the each function.
  But each time either the code is not working, or the total field adds-up amounts from other forms!
  I also tried something like the following, without using <code>&lt;div&gt;</code>:</p>
  
  <pre><code>$(this).closest('tr').next().find('span.total').html(sum.toFixed(2));
  or
  $(this).closest('span.total').html(sum.toFixed(2));
  or even
  $(this).closest('span').prevAll('.total:first').html(sum.toFixed(2));
  </code></pre>
  
  <p>Thanks in advance for your help!</p>