JSFiddle - React, Tailwind, and code Playground

by shyam kumar

HTML

<table border="1">
  <tr>
      <th>sl</th>
      <th>TA</th>
      <th>DA</th>
      <th>HA</th>
      <th>Total</th>
  </tr>
  <tr>
      <td>1</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input class="expenses_sum"></td>
  </tr>
  <tr>
      <td>2</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input class="expenses_sum"></td>
  </tr>
  <tr>
      <td>3</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input class="expenses_sum"></td>
  </tr>

</table>

JavaScript

$(document).on('keyup','input.expenses',function(){

  var expenses = $(this).parents('tr').find('.expenses');
  var expenseTotal = $(this).parents('tr').find('.expenses_sum');
  expenseTotal.val('0');
  $.each(expenses,function(index,object){   	
    if($(object).val()!='')
    {
 expenseTotal.val(parseInt(expenseTotal.val())+parseInt($(object).val()));
    }
  })
});