I've been using JavaScript to create new row on the table so that each input data will save in database. please refer example below.
Script for adding row on the table
<script type="text/javascript">
$(document).ready(function(){
var html='<tr><td><input type="text" size="2" class="form-control" name="qt[]" id="qt"
oninput="calculate();" required></td>
<input type="text" size="5" class="form-control" name="uc[]" id="cf" oninput="calculate();"
placeholder="₱0.00" required></td>
<td><center><input type="text" size="5" class="form-control" name="ta[]" id="result"
required></center></td><input type="button" class="form-control" name="remove" id="remove"
value="-"></td></tr>';
var x = 1;
$("#addd").click(function(){
$("#tb_field").append(html);
});
$("#tb_field").on('click','#remove',function(){
$(this).closest('tr').remove();
x--;
});
});
</script>
Script for multiplying two input types in the first row of the table
<script>
function calculate() {
var myBox1 = document.getElementById("qt").value;
var myBox2 = document.getElementById("cf").value;
var result = document.getElementById("result");
var myResult = myBox1 * myBox2;
var format2 = myResult.toLocaleString("USD");
document.getElementById("result").value = format2;
}
</script>
I made a working JSFiddle example. The code is:
<table id="myTable">
</table>
<input type="button" name="addRow" id="addRow" value="+">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?Version=43"></script>
<script>
function newRowHtml(rowNumber)
{
return '<tr id="row'+rowNumber+'"><td><input type="text" size="2" name="qt[]" class="qt" oninput="calculate('+rowNumber+');" value="0" required></td><td><input type="text" size="5" name="uc[]" class="cf" oninput="calculate('+rowNumber+');" value="0" required></td><td><center><input type="text" size="5" name="ta[]" class="ta" required></center></td><td><input type="button" name="remove" id="removeRow" value="-"></td></tr>';
}
var rowNumber = 1;
$("#addRow").click(function() {
$("#myTable").append(newRowHtml(rowNumber));
calculate(rowNumber);
rowNumber++;
});
$("#myTable").on('click', '#removeRow', function() {
$(this).closest('tr').remove();
});
function calculate(rowNumber)
{
let row = $("#row"+rowNumber);
let qt = parseInt(row.find(".qt").val());
let cf = parseInt(row.find(".cf").val());
row.find(".ta").val(qt * cf);
}
</script>
I have numbered the rows, which is easier than number cells, and make fully use of JQuery. I hope this makes some sense, and that you can adapt it to your needs.
You can, of course, use parseFloat() instead of parseInt(), but having values like ₱0.00 in your input could complicate things.