JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <table id="dataTbl" class="table table-bordered table-hover" style="font-size:13px;">
    <thead>
    <tr>
        <th width="10%">SLSI Entry No</th>
        <th width="10%">Application Posted in</th>
        <th width="30%">SLS No and Unit</th>
        <th width="30%">Product Description</th>
        <th width="10%">Status</th>
        <th class="hidden-print"></th>
        <th class="hidden-print"></th>
        <th class="hidden-print"></th>
    </tr>
    </thead>
    </table>

JavaScript

$(document).ready(function(){
		var tableProduct = $('#dataTbl').DataTable({
				"bSort": true, 
        "oLanguage": {"sZeroRecords": "", "sEmptyTable": ""}
		});
    
    for (var i = 0; i <3 ; i++) {
        var pa = $('#aaa');
        var td1 = "td"+i;
        var td2 = "td"+i;
        var td3 = "td"+i;
        var td4 = "td"+i;
        var td5 = "td"+i;
        var td6 = "<input type='button' class='btn btn-success' value='abc'>";
        var td7 = "td"+i;
        var td8 = "td"+i;
    		tableProduct.row.add([td1, td2, td3, td4, td5, td6, td7, td8]).draw(true);
		}
    
    $(document).on("click","#dataTbl td:nth-child(2)",function(){
    		alert($(this).text());
    });
    
    });