JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<fieldset>
    <legend>Personal</legend>
    <table class='personal'>
        <tr>
            <th>First</th>
            <td>
                <input type='text' class='k-widget k-multiselect k-header styleH2 allW' id='fName' />
            </td>
        </tr>
        <tr>
            <th>Last</th>
            <td>
                <input type='text' class='k-widget k-multiselect k-header styleH2 allW' id='lName' />
            </td>
        </tr>
        <tr>
            <th>Email</th>
            <td>
                <input type='text' class='k-widget k-multiselect k-header styleH2 allW' id='email' />
            </td>
        </tr>
    </table>
</fieldset>
</div>
<fieldset>
    <legend>Mailing</legend>
    <table>
        <tr>
            <th>Company</th>
            <td>
                <input type='text' class='k-widget k-multiselect k-header styleH2 allW' id='company' />
            </td>
        </tr>
        <tr>
            <th valign="top">Address</th>
            <td>
                <textarea id="address" class='k-widget k-multiselect k-header styleH2 allW' style='height: 80px !important' id='address'></textarea>
            </td>
        </tr>
    </table>
</fieldset>
<br />
<button id='addRow'>Add New User</button>
<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Address:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Smith</td>
            <td>[email protected]</td>
            <td>Company
          ...

CSS

fieldset {
    width: 40%;
    display:inline
}
.rowSelected {
    background-color: blue !important
}

JavaScript

var oTable;

/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody tr").click(function (e) {
    if ($(this).hasClass('rowSelected')) {
        $(this).removeClass('rowSelected');
    } else {
        oTable.$('tr.rowSelected').removeClass('rowSelected');
        $(this).addClass('rowSelected');
    }

    var properties; // all td from .row_selected		 

    properties = fnGetSelected(oTable).find("td");
    var names = properties.eq(0).text().split(' ');
    $("#fName").val(names[0]);
    $("#lName").val(names[1]);
    $("#email").val(properties.eq(1).text());
    $("#company").val(properties.eq(2).text());
});


oTable = $('#example').dataTable();

$('#addRow').click(function () {
    $('#example').dataTable().fnAddData([
    $("#fName").val() + $("#lName").val(),
    $("#email").val(),
    $("#company").val() + '<br>' + $('#address').val()]);
    
    //empty
    $("#fName").val('')
    $("#lName").val(''),
    $("#email").val(''),
    $("#company").val(''),
    $("#address").val('')    
});

/* Datatables: Get the rows which are currently selected */
function fnGetSelected(oTableLocal) {
    return oTableLocal.$('tr.rowSelected');
}