JSFiddle - React, Tailwind, and code Playground
HTML
<div style='border: 1pt solid black; width: 99%; border-radius: 25pt;'>
<h2>Cyprus v Wales - Match Betting</h2>
<form action='/' method='post'>
<table class='table table-condensed'>
<tr>
<td style='width: 50%;'>Sport: </td>
<td>Football</td>
</tr>
<tr>
<td style='width: 50%'>Participant: </td>
<td>Cyprus</td>
</tr>
<tr>
<td>Market: </td>
<td>Euro 2016</td>
</tr>
<tr>
<td>Time: </td>
<td>19:45</td>
</tr>
<tr>
<td>Odds: </td>
<td>19/5<input class="odds" type='hidden' value='3.8' id='__odds-3' /></td>
</tr>
<tr>
<td>Stake: </td>
<td>
<div class='input-group'><span class='input-group-addon' id='basic-addon1'>£</span><input style='width: 100%' class ="stake" type='text' name='stake' id='stake-3' aria-describedby='basic-addon1' placeholder='Stake' /></div>
</td>
</tr>
<tr id='dynamic_return'>
<td colspan='10'>
<center><div class='input-group'><span class='input-group-addon' id='basic-addon2'>Estimated Return: £</span><input class="showdynamicreturn" style='width:100%' type='text' id='showdynamicreturn-4' aria-describedby='basic-addon2' placeholder='0.00' readonly /></div></center>
</td>
</tr>
<tr>
<td colspan='10'>
<center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center>
</td>
</tr>
<!-- Hidden fields for the horses information. -->
<input type='hidden' name='betslip_id' value='13' /><input type='hidden' name='sport' value='' /><input type='hidden' name='eachWay' id='eachWay'...
JavaScript
$(document).ready(function() {
$(".stake").on('keyup', function () {
var newVal = (parseFloat($(this).val(), 10) * parseFloat($(this).closest(".table").find(".odds").val(), 10)) + parseFloat($(this).val(), 10) || 0;
$(this).closest(".table").find(".showdynamicreturn" ).val(parseFloat(newVal).toFixed(2));
});
});