JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>Gross Total Income.</td>
<td><input type="text" name="income-self-gincome1-1" id="income-self-gincome1-1" style="width:100px" /></td>
<td><input type="text" name="income-self-gincome2-1" id="income-self-gincome2-1" style="width:100px" /></td>
<td><input type="text" name="income-self-gincome3-1" id="income-self-gincome3-1" style="width:100px" /></td>
</tr>
<tr>
<td>Deduction</td>
<td><input type="text" name="income-self-deduct1-1" id="income-self-deduct1-1" style="width:100px" /></td>
<td><input type="text" name="income-self-deduct2-1" id="income-self-deduct2-1" style="width:100px" /></td>
<td><input type="text" name="income-self-deduct3-1" id="income-self-deduct3-1" style="width:100px" /></td>
</tr>
<tr>
<td>Net Total Income</td>
<td><input type="text" onKeyUp="calculatenet(this.value,this.id)" name="income-self-net1-1" id="income-self-net1-1" style="width:100px" /></td>
<td><input type="text" onKeyUp="calculatenet(this.value,this.id)" name="income-self-net2-1" id="income-self-net2-1" style="width:100px" /></td>
<td><input type="text" onKeyUp="calculatenet(this.value,this.id)" name="income-self-net3-1" id="income-self-net3-1" style="width:100px" /></td>
</tr>
</table>
JavaScript
function calculatenet(str,str1)
{
var id = str1.split('-');
var cid = id[3];
var num = id[2].split('net');
var gross = $("#income-self-gincome"+num[1]+"-"+cid).val();
var deduct= $("#income-self-deduct"+num[1]+"-"+cid).val();
if(gross >= deduct)
{
var net = gross - deduct;
console.log(net);
console.log(str);
if(net==str)
{
$("#income-self-net"+num[1]+"-"+cid).css('color','green');
}
else
{
$("#income-self-net"+num[1]+"-"+cid).css('color','red');
}
}
else
{
$("#income-self-net"+num[1]+"-"+cid).css('color','red');
}
}