JSFiddle - React, Tailwind, and code Playground

HTML

<tr>
  <td style="text-align: left;">Number of payments to refund: </td>
  <td style="text-align: left;"><input name="Numofpayments" type="text" class="val" id="val1"/></td>
  <td></tr>
<tr>
  <td style="text-align: left;">Cost of premium: </td>
  <td style="text-align: left;"><input name="Premium" type="text" class="val" id="val2"></td>
  <td></tr>
      <tr>
  <td style="text-align: left;">Number of payments to refund2: </td>
  <td style="text-align: left;"><input name="Numofpayments" type="text" class="val" id="val3"/></td>
  <td></tr>
<tr>
  <td style="text-align: left;">Cost of premium2: </td>
  <td style="text-align: left;"><input name="Premium" type="text" class="val" id="val4"></td>
  <td></tr>
<tr>
  <td style="text-align: left;">Sub Total: </td>
  <td style="text-align: left;"><input name="SubTotal" type="text" id="sub" value="0" readonly/></td>
  <td></tr>
<tr>
  <td style="text-align: left;">Total Refund (including 8% redress) </td>
  <td style="text-align: left;"><input name="TotalRefund" type="text" id="total" value="0" readonly/></td>
</tr>

JavaScript

$(document).ready(function(){
    var sum = 0;
    function calcSum(prevVal){
        
       var val1 =   $('#val1').val();
       var val2 =   $('#val2').val();
       var val3 =   $('#val3').val();
       var val4 =   $('#val4').val();

        this.sum = parseFloat(val1) * parseFloat(val2) + parseFloat(val3) * parseFloat(val4);
        return this.sum;
    }
    var subAmt = $("#sub"), taxAmt = $("#tax"), totAmt = $("#total");
    $(".val").each(function(){
        var prevVal = this.value/1, self = this;
        
        $(this).keyup(function(){
            subAmt.val(calcSum.call(self, prevVal));
            totAmt.val(this.sum + this.sum*parseFloat(taxAmt.val()/100));
            prevVal = self.value; 

        });
    });
});