JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
			<tr>
				<td width="40px">1</td>
				<td>Butter</td>
				<td><input class="txt" type="text" name="cost"/></td>
			</tr>
			<tr>
				<td>2</td>
				<td>Cheese</td>
				<td><input class="txt" type="text" name="cost"/></td>
			</tr>
			<tr>
				<td>3</td>
				<td>Eggs</td>
				<td><input class="txt" type="text" name="cost"/></td>
			</tr>
			<tr>
				<td>4</td>
				<td>Milk</td>
				<td><input class="txt" type="text" name="cost"/></td>
			</tr>
			<tr>
				<td>5</td>
				<td>Bread</td>
				<td><input class="txt" type="text" name="cost"/></td>
			</tr>
			<tr>
				<td>6</td>
				<td>Soap</td>
				<td><input class="txt" type="text" name="cost"/></td>
			</tr>
			<tr id="summation">
				<td>&nbsp;</td>
				<td align="right">Sum :</td>
				<td align="center"><span id="sum">0</span></td>
			</tr>
		</table>

CSS

body{font-family:sans-serif}
#summation{font-size:18px;font-weight:bold;color:#174c68}
.txt{background-color:#feffb0;font-weight:bold;text-align:right}

JavaScript

$(document).ready(function(){$(":text").each(function(){$(this).keyup(function(){calculateSum();});});});function calculateSum(){var sum=0;$(":text").each(function(){if(!isNaN(this.value)&&this.value.length!=0){sum+=parseFloat(this.value);}});$("#sum").html(sum.toFixed(2));}