JSFiddle - React, Tailwind, and code Playground

HTML

<form id="quote" action="" method="get">
<table width="532" border="1" cellspacing="1" cellpadding="0.5">
<tbody>
<tr>
<th scope="col" width="109">
<div align="center">Date</div></th>
<th scope="col" width="158">
<div align="center">Half day</div></th>
<th width="112">
<div align="center">Full day</div></th>
<th width="134">
<div align="center">Total for the day</div></th>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date1" size="15" /></div></td>
<td>
<div align="center"><input type="text" name="halfday1" size="15" maxlength="10" /></div></td>
<td>
<div align="center"><input type="text" name="fullday1" size="15" /></div></td>
<td>
<div align="center"><input type="text" name="total1" size="15" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date2" size="15" /></div></td>
<td>
<div align="center"><input type="text" name="halfday2" size="15" /></div></td>
<td>
<div align="center"><input type="text" name="fullday2" size="15" /></div></td>
<td>
<div align="center"><input type="text" name="total2" size="15" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date3" size="15" /></div></td>
<td>
<div align="center"><input type="text" name="halfday3" size="15" /></div></td>
<td>
<div align="center"><input type="text" name="fullday3" size="15" /></div></td>
<td>
<div align="center"><input type="text" name="total3" size="15" /></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>

JavaScript

function doTotal(form) {
    var a = (+form.halfday1.value);
    var b = (+form.fullday1.value);


    form.total1.value = a + b ;
}
document.getElementById("quote").onchange = function (){doTotal(this)};