JSFiddle - React, Tailwind, and code Playground
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="10" id="nextYear" class="border">
<tr class="d_green">
<td colspan="6">NEXT YEAR</td>
</tr>
<tr>
<td width="36%">Activity</td>
<td width="9%">Risk</td>
<td width="13%">Hours</td>
<td width="13%">Weels</td>
<td width="13%">Average</td>
<td width="16%"> </td>
</tr>
<tr>
<td align="center"><input type="text" name="activity" id="nextYearSelect1" class="input_b_r" /></td>
<td class="risk"><select name="nextYearRisk1" id="nextYearRisk1">
<option></option>
<option>low</option>
<option>moderate</option>
<option>high</option>
</select></td>
<td><input type="text" name="textfield" id="nextYearHours1" class="input_b_r" /></td>
<td><input type="text" name="textfield2" id="nextYearWeeks1" class="input_b_r" /></td>
<td><input type="text" name="textfield3" id="nextYearAverage1" class="input_b_r" /></td>
<td><input type="button" name="button2" id="button2" value="New Row" class="button mt5" /></td>
</tr>
<tr class="l_white">
<td align="center"> </td>
<td colspan="4" align="right"><table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="65%">Total of moderate risk activities:</td>
<td width="35%"><input type="text" name="totalModNextYear" id="textfield6" class="input_b1" /></td>
<td width="35%">hours/year</td>
</tr>
<tr>
<td>Total of high-risk activities:</td>
<td><input type="text" name="totalHighNextYear" id="textfield7" class="input_b1" /></td>
<td>hours/year</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2" align="right"><input type="submit" name="button3" id="button3" value="Submit"...
JavaScript
var table = $( '#nextYear' )[0];
$( table ).delegate( '#button2', 'click', function () {
var thisRow = $( this ).closest( 'tr' )[0];
$( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
$(this).remove();
});
$('#nextYear')
.on('change', 'select', calc)
.on('keyup', 'input', calc);
function calc(){
$('#nextYear tr:has(.risk)').each(function(i,v){
var $cel = $(v.cells);
var $risk = $cel.eq(1).find('option:selected').val();
var $numb = $cel.eq(2).find('input').val();
var $weeks = $cel.eq(3).find('input').val();
var $avg = ($numb * $weeks) / 52;
$cel.eq(4).find('input').val($avg.toFixed(1));
});
var tot = {};
$('#nextYear tr:has(.risk) option:selected')
.map(function(i){
var el = $(this).val();
var qty = parseFloat($('#nextYear tr:has(.risk)').eq(i).find('td:last').prev().find('input').val());
if (!tot.hasOwnProperty(el)) {
tot[el] = 0;
}
tot[el] += qty
return tot;
}).get();
// console.log(tot);
$('#textfield6').val(tot.moderate?tot.moderate.toFixed(1):'');
$('#textfield7').val(tot.high?tot.high.toFixed(1):'');
}