JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<div class="row">
  <div class="col-lg-2">
    <table id="table-users" class="table" width="100%" cellspacing="0">
      <thead>
        <tr>
          <th>User</th>
          <th>Password</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    <button id="addRow" class="btn btn-success btn-add" type="button">
             <span class="glyphicon glyphicon-plus"></span>
    </button>
  </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

var options = {
    "bFilter": false, 
    "bInfo": false,
    "aoColumnDefs": [ {
    "aTargets": [ 0 ],
    "mData": "user",
    "mRender": function ( data, type, full ) {
      return '<input type="text" class="form-control" id="users['+ full.DT_RowId +'].name" name="users['+ full.DT_RowId +'].name" value="'+data+'">';
      }
    } ]
}
var oTable = $("#table-users").DataTable(options);
  
var counter = 0;
$('#addRow').on( 'click', function () {
    oTable.row.add( [
        "user" + counter,
        "password" + counter ,
    ] ).draw();

    counter++;
} );