title: How to calculate sum of all rows with jQuery?
body: <p>Below is my table  code with <code>Add New</code> button. Onclick <code>Add New</code> 
  button new row will create. In picture you can see this. User will
  input debit and credit values at the end all debit values should be
  calculate and sum should be display and same for the credit value. I
  am using jQuery to create new row:</p>
  
  <p>Jquery code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        $("#add, .check ").click(function() {
        $('#datatable-buttons tbody&gt;tr:last')
        .clone(true)
        .insertAfter('#datatable-buttons tbody&gt;tr:last').find('input').each(function(){
        $(this).val('');
        });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>Html table code:</p>
  
  <pre><code>&lt;table id="datatable-buttons"  class="table table-striped jambo_table bulk_action"&gt;
      &lt;thead&gt;
        &lt;tr class="headings"&gt;
          &lt;th&gt;
            &lt;input type="checkbox" id="check-all" class="flat"&gt;
          &lt;/th&gt;
          &lt;th class="column-title"&gt;Account&lt;/th&gt;
          &lt;th class="column-title"&gt;Debits&lt;/th&gt;
          &lt;th class="column-title"&gt;Credits&lt;/th&gt;
          &lt;th class="column-title"&gt;Description&lt;/th&gt; 
          &lt;th class="column-title"&gt;Name&lt;/th&gt;                          
          &lt;th class="column-title no-link last"&gt;&lt;span class="nobr"&gt;Action&lt;/span&gt;
          &lt;/th&gt;
          &lt;th class="bulk-actions" colspan="7"&gt;
            &lt;a class="antoo" style="color:#fff; font-weight:500;"&gt;Bulk Actions ( &lt;span class="action-cnt"&gt; &lt;/span&gt; ) &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;                                
      &lt;tbody&gt;
        &lt;tr class="even pointer"&gt;
          &lt;td class="a-center "&gt;
            &lt;input type="checkbox" class="flat" name="table_records"&gt;
          &lt;/td&gt;                                    
          &lt;td class=" "&gt;&lt;select class="form-control" name="journalname"&gt;
            &lt;option&gt;Choose option&lt;/option&gt;                   
            &lt;?php
            $sql = mysqli_query($conn,'SELECT * FROM `chartofaccounts`');
            while ($row1 = mysqli_fetch_array($sql)) 
              {?&gt;
                &lt;option value="&lt;?php echo $row1["name"];?&gt;"&gt;&lt;?php echo $row1["name"];?&gt;&lt;/option&gt;
            &lt;?php  }?&gt;
          &lt;/select&gt;&lt;/td&gt;
          &lt;td class=""&gt;&lt;input class="form-control" type="text" name="debit" &gt;&lt;/td&gt;
          &lt;td class=" "&gt;&lt;input class="form-control" type="text" name="credit"&gt;&lt;/td&gt;
          &lt;td class=" "&gt;&lt;input class="form-control" type="text" name="descc"&gt;&lt;/td&gt; 
          &lt;td class=" "&gt;&lt;input class="form-control" type="text" name="name"&gt;&lt;/td&gt;        
          &lt;td class=" last"&gt;&lt;a href="#"&gt;View&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;                           
      &lt;/tbody&gt;                           
    &lt;/table&gt;
    &lt;button type="button" id="add"&gt;Add New&lt;/button&gt;
  </code></pre>
  
  <p>Below image will give you clear understanding:</p>
  
  <p><img src="https://i.stack.imgur.com/wFpj0.png" alt="enter image description here"></p>