JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
           <table id="maintable" class="main">
                <thead>
                    <tr>
                    <th>
                    No.
                    </th>
                    <th>
                    Delivery Date
                    </th>
                    <th bgcolor="#1a1a66">
                    Counter Party
                    </th>
                    <th bgcolor="#1a1a66">
                    Buy or<br>Sell
                    </th> 
                    <th bgcolor="#1a1a66">
                    Underlying Type
                    </th>
                    <th bgcolor="#1a1a66">
                    Product<br>Type
                    </th>
                    <th bgcolor="#1a1a66">
                    Pricing<br>Structure                       
                    </th>
                    <th bgcolor="#1a1a66">
                    Fixed Price
                    </th>
                    <th bgcolor="#1a1a66">
                    Discount<br>Provisions
                    </th>
                    <th bgcolor="#1a1a66">
                    Size (lbs) $<br>For Inflation
                    </th>
                    <th bgcolor="#1a1a66">
                    Strike<br>If Option)
                    </th>
                    <th bgcolor="#1a1a66">
                    Base Esc<br>Start Date
                    </th>
                    <th bgcolor="#24248f">
                    Underlying<br>Market
                    </th>
                    <th bgcolor="#24248f">
                    Actual Value
                    </th>
                    <th bgcolor="#24248f">
                    Total Asset<br>or...

JavaScript

var id = 0;

$(function() {$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
    });  

$(document).ready(function() {
	$('#maintable').DataTable( {
                "aoColumns": [
              null,
            { "orderDataType": "dom-text-numeric", "sType": "date-uk"},
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text", "type": "numeric"  },
            { "orderDataType": "dom-text", "type": "numeric"  },
            { "orderDataType": "dom-text", "type": "numeric"  },
            { "orderDataType": "dom-text", "type": "numeric"  },
              null,
              null,
              null,
              null
                ]
    } );
});

function addRow() {
id ++;
var place = id + 1;    

$('#maintable').dataTable().fnAddData( [
    '<span id="pla'+id+'">'+place+'</span>',
    '<input type="text" class="datepicker" id="ddate'+id+'" size="8"/>',
    '<select id="count'+id+'"></select>',
    '<select id="assol'+id+'"><option value="liab">Buy</option><option value="asset">Sell</option></select>',
    '<select id="undt'+id+'"><option value="u3o8">U3O8</option><option value="inf">Inflation</option></select>',
    '<select id="prodt'+id+'"><option value="out">Outright</option><option value="call">Ceiling (Call)</option><option value="put">Floor (Put)</option></select>',
    '<select id="pricst'+id+'"><option value="float">Floating</option><option value="fix">Fixed</option><</select>',
    '<input onkeyup="begin();" type="text" id="fp'+id+'" size="6" />',
    '<input...