JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<div id="dialog-confirm" title="Error">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0px 0;"></span>Please fill all the required fields!</p>
</div>
<br />Name:
<input type="text" name="name" id="name" />
<br />Age:
<input type="text" name="age" id="age" />
<br />Gender:
<br />
<input type="radio" name="gender" id="gender" value="Male" />Male
<br />
<input type="radio" name="gender" id="gender" value="Female" />Female
<br />
<button id="Save" name="Save">Save</button>
<div class="container well">
    <table id="myTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

CSS

html {
    background: repeat-x scroll 0 0;
    overflow-y: scroll;
}
body {
    background: no-repeat scroll center top transparent;
    font-family:"Arial", "Helvetica", "Verdana", "sans-serif";
    font-size: 10px;
    margin: 0;
    min-height: 100%;
    padding: 0 0 20px;
}

JavaScript

$("#dialog-confirm").dialog({
    resizable: false,
    height: 140,
    modal: true,
    autoOpen: false,
    buttons: {
        "Close": function () {
            $(this).dialog("close");
        }
    }
});

$('#myTable').dataTable({
    "bStateSave": true,
    "stateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth": false
});

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

$('#Save').click(function () {
    if ($('#name').val() == '' || $('#age').val() == '' || $("input[name='gender']:checked").val() == undefined) {
        $("#dialog-confirm").dialog("open");

    } else {

        var data = [
        $('#name').val(),
        $('#age').val(),
        $("#gender:checked").val(),
        "<button class='delete'>Delete</button>"];
        
        oTable.fnAddData(data);
        
        localStorage.setItem(data)
        localStorage.getItem(data)
    }
});

$(document).on('click', '.delete', function () {
    var row = $(this).closest('tr');   
    oTable.fnDeleteRow(row[0]);
    
    localStorage.setItem(row)
    localStorage.getItem(row)   
});