Question

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>

Answer 1

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.