JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<table id="pr">
<tbody onload="">
<tr class="thd">
<th>Score A</th>
<th>Score B</th>
<th>Total</th>
</tr>

<tr>
<td><input type="text" class="fin" onkeyup="update();" /></td>
<td><input type="text" class="fin" onkeyup="update();" /></td>
<td input type="text" class="fin" name="totdeduction"></td>
</tr>

</tbody>
</table>
<br />
<br />
    
<script>
function update() {
    var j = document.getElementById("pr").rows[1].cells[0].getElementsByTagName("input")[0].value;
    var k = parseInt(j);
    if (isNaN(k)) {k=0}
    var l = document.getElementById("pr").rows[1].cells[1].getElementsByTagName("input")[0].value;
    var m = parseInt(l);
    if (isNaN(m)) {m=0}
    var n = (k + m);
    document.getElementById("pr").rows[1].cells[2].innerHTML = n;
}
</script>
</body>

CSS

th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
border-style: solid; margin: 0px; border-colapse: colapse; 
border-spacing: 0px;}
td {font-weight: Normal; font-size: 14px; border: 1px; border-style: solid; 
margin: 0px; border-colapse: colapse;}
.sn {text-align: right;}
.fin {text-align: right;}