JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table id="blahtable" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th class="text-center">Col1</th>
      <th class="text-center">Col2</th>
      <th class="text-center">Col3</th>
      <th class="text-center">Col4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th class="text-right">Total:</th>
      <th></th>
    </tr>
  </tfoot>
  <tbody>
    <tr id='item0'>
      <td>
        <input type="text" class="form-control col1">
      </td>
      <td>
        <input type="text" class="form-control col2">
      </td>
      <td>
        <input type="text" class="form-control col3">
      </td>
      <td class="col4"></td>
    </tr>
    <tr id='item1'></tr>
  </tbody>
</table>
<div class='btn-group'><a id='add_row' class='btn btn-default'>New Row</a></div>
<div class='btn-group'><a id='delete_row' class='btn btn-default'>Delete</a></div>

JavaScript

$(document).ready(function() {

      $('input.col2').on('change', function() {
        var col2val = $(this).val(); //col2val = the value after change
        var col3val = $(this).closest('tr').find('input.col3').val();
        $(this).closest('tr').find('.col4').html(parseFloat(col2val) * parseFloat(col3val));
      });

      $('input.col3').on('change', function() {
        var col3val = $(this).val();
        var col2val = $(this).closest('tr').find('input.col2').val();
        $(this).closest('tr').find('.col4').html(parseFloat(col2val) * parseFloat(col3val));
      });

      var i = 1;

      $("#add_row").click(function() {
        $('#item' + i).html("<td><input type='text' class='form-control name'></td><td><input type='text' class='form-control col2'></td><td><input type='text' class='form-control col3'></td><td class='col4'></td>");
        $('#blahtable').append('<tr id="item' + (i + 1) + '"></tr>');
        $('#item' + i + ' input.col2').on('change', function() {
          var col2val = $(this).val();
          var col3val = $(this).closest('tr').find('input.col3').val();
          $(this).closest('tr').find('.col4').html(parseFloat(col2val) * parseFloat(col3val));
        });
        $('#item' + i + ' input.col3').on('change', function() {
          var col3val = $(this).val();
          var col2val = $(this).closest('tr').find('input.col2').val();
          $(this).closest('tr').find('.col4').html(parseFloat(col2val) * parseFloat(col3val));
        });
        i++;
      });

      $("#delete_row").click(function() {
        if (i > 1) {
          $("#item" + (i - 1)).html('');
          i--;
        }
      });

      $('#blahtable').dataTable({
        "footerCallback": function(row, data, start, end, display) {
          $(api.column(4).footer()).html('Working');
        }
      });

    });