JSFiddle - React, Tailwind, and code Playground

by S.M. Murad Hasan Tanvir

HTML

<table border="1" cellpadding="5" cellspacing="0" width="100%">
  <tr>
    <th>Time in</th>
    <th>Time out</th>
    <th>Total 1</th>
    <th>Option 1</th>
    <th>Option 2</th>
    <th>Total 2</th>
  </tr>
  <tr>    
    <td>
      <select name="time_in" class="p1g1 cng">
        <option value='0'>---</option>
        <option value='8'>08:00</option>
        <option value='8.25'>08:15</option>
        <option value='8.5'>08:30</option>
      </select>
    </td>
    <td>
      <select name="time_out" class="p1g2 cng">
        <option value='0'>---</option>
        <option value='12'>12:00</option>
        <option value='12.25'>12:15</option>
        <option value='12.5'>12:30</option>
        <option value='12.75'>12:45</option>
      </select>
    </td>
    <td>
      <input type="text" name="total_1" class="total_1" size = "4"/>
    </td>
    <td>
      <input type='text' value="0" name='other_1' class="other_1 cng" size = "4" />
    </td>
    <td>
      <input type='text' value="0" name='other_2' class="other_2 cng" size="4"/>
    </td>
    <td>
      <input type='text' name='total_2' class="total_2" value="0" size='4' />
    </td>
  </tr>
  <tr>    
    <td>
      <select name="time_in" class="p1g1 cng">
        <option value=0>---</option>
        <option value=8>08:00</option>
        <option value=8.25>08:15</option>
        <option value=8.5>08:30</option>
      </select>
    </td>
    <td>
      <select name="time_out" class="p1g2 cng">
        <option value=0>---</option>
        <option value=12>12:00</option>
        <option value=12.25>12:15</option>
        <option value=12.5>12:30</option>
        <option value=12.75>12:45</option>
      </select>
    </td>
    <td>
      <input type="text" name="total_1" class="total_1" size = "4"/>
    </td>
    <td>
      <input type='text' value="0" name='other_1' class="other_1 cng" size = "4" />
    </td>
    <td>
      <input type='text' value="0" name='other_2' class="other_2 cng" size="4"/>
    </td>
   ...

JavaScript

$(function(){	
	$(".cng").on("change", function(){
  	grand_total = $(".grand_total").val();
  
  	var obj = $(this).closest("tr");
    var p1g1 = obj.find(".p1g1").val();
    var p1g2 = obj.find(".p1g2").val();
    var other_1 = obj.find(".other_1").val();
    var other_2 = obj.find(".other_2").val();
    
    var total_1 = p1g2 - p1g1;
    obj.find(".total_1").val(total_1);
    
    var total_2 = total_1 + parseInt(other_1) + parseInt(other_2);
    obj.find(".total_2").val(total_2);
    
    grand_sum = 0;
    $(".total_2").each(function(){
    	grand_sum = parseFloat(grand_sum) + parseFloat($(this).val());
    });
    $(".grand_total").val(grand_sum);
  });
});