I have tweaked your solution a bit to make it work. But this is not an ideal way of doing things.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(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");
var taxAmt = $("#tax");
var tmpTotalRef20=$("#totalRef20");
var totAmt = $("#total");
var taxAmt20 = $("#taxa");
var costOfPremium = $("#val2");
var totalb = $("#totalb");
$(".val").each(function(){
var prevVal = this.value/1, self = this;
$(this).keyup(function(){
subAmt.val(calcSum.call(self, prevVal));
prevVal = self.value;
var eightPercent = parseFloat(costOfPremium.val())*parseFloat(taxAmt.val()/100);
var twentyPercent = eightPercent * parseFloat(taxAmt20.val()/100);
tmpTotalRef20.val(twentyPercent);
totAmt.val(this.sum + this.sum*parseFloat(taxAmt.val()/100));
var finalTotal = parseFloat(totAmt.val() - twentyPercent);
totalb.val( finalTotal);
});
});
});
</script>
</head>
<table>
<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><p>
<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><p>
<tr>
<td style="text-align: left;">Additional number of payments to refund: </td>
<td style="text-align: left;"><input name="Numofpayments2" type="text" class="val" id="val3" value="0"/></td>
<td></tr><p>
<tr>
<td style="text-align: left;">Additional cost of premium: </td>
<td style="text-align: left;"><input name="Premium2" type="text" class="val" id="val4" value="0"/></td>
<td></tr><p>
<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><p>
<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><p>
<tr>
<td style="text-align: left;">Total Refund (including 20% of the 8%) </td>
<td style="text-align: left;"><input name="TotalRefund20" type="text" id="totalRef20" value="0" readonly/></td><p>
</tr>
<tr>
<td style="text-align: left;">Total </td>
<td style="text-align: left;"><input name="Total" type="text" id="totalb" value="0" readonly/></td>
</tr>
</table>
<input type="hidden" id="tax" value="8" readonly/>
<input type="hidden" id="taxa" value="20" readonly/>
</html>