HTML:
<table class="table table-bordered table-striped CounterReportField">
<thead>
<tr>
<th class="col-md-1 text-center">Shade %</th>
<th class="col-md-1 text-center">Strength</th>
<th class="col-md-1 text-center">DE (CMC)</th>
<th class="col-md-1 text-center">DL*</th>
<th class="col-md-1 text-center">DC*</th>
<th class="col-md-1 text-center">DH*</th>
<th class="col-md-1 text-center">Da*</th>
<th class="col-md-1 text-center">Db*</th>
<th class="col-md-1 text-center">nm</th>
<th class="col-md-1 text-center">Add Field</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="shade[]" class="form-control"/>
</td>
<td>
<input type="text" name="strength[]" class="form-control strength"/>
</td>
<td>
<input type="text" name="DE[]" class="form-control"/>
</td>
<td>
<input type="text" name="DL[]" class="form-control"/>
</td>
<td>
<input type="text" name="DC[]" class="form-control"/>
</td>
<td>
<input type="text" name="DH[]" class="form-control"/>
</td>
<td>
<input type="text" name="Da[]" class="form-control"/>
</td>
<td>
<input type="text" name="Db[]" class="form-control"/>
</td>
<td>
<input type="text" name="nm[]" class="form-control"/>
</td>
<td class="text-center">
<a class="btn btn-primary addCounterReportFields"><i class="fa fa-plus"></i></a>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-striped">
<tr>
<th class="col-md-1 text-center">Average Strength</th>
<td class="col-md-1 text-center">
<input type="text" name="avg_strength" class="form-control avg_strength"/>
</td>
<td class="col-md-8">Please Enter the Average of Strengths Manually</td>
</tr>
</table>
JS:
<script>
$(document).ready(function () {
$('.addCounterReportFields').click(function () {
$('.CounterReportField').append(
'<tr>' +
'<td><input type="text" name="shade[]" class="form-control"/></td>' +
'<td><input type="text" name="strength[]" class="form-control strength"/></td>' +
'<td><input type="text" name="DE[]" class="form-control"/></td>' +
'<td><input type="text" name="DL[]" class="form-control"/></td>' +
'<td><input type="text" name="DC[]" class="form-control"/></td>' +
'<td><input type="text" name="DH[]" class="form-control"/></td>' +
'<td><input type="text" name="Da[]" class="form-control"/></td>' +
'<td><input type="text" name="Db[]" class="form-control"/></td>' +
'<td><input type="text" name="nm[]" class="form-control"/></td>' +
'<td class="text-center"><button class="btn btn-danger removeCounterReportFields"><i class="fa fa-minus"></i></button></td>' +
'</tr>'
);
});
$('.CounterReportField').on('click', '.removeCounterReportFields', function () {
$(this).parent().parent().remove();
});
$(".CounterReportField").on("keyup", "input", function () {
var total = 0;
var count = $('.strength').each(function(){
total += parseFloat($(this).val());
})
var av = total/count.length;
var avg = av.toFixed(2); //limit number of value after decimal
if (Number.isInteger(av)) { //check value is integer or floating
$('.avg_strength').val(av);
} else{
$('.avg_strength').val(avg);
}
});
});
</script>
Thank you and enjoy....