JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<table id="service_group0" data-filter="#filter"><thead style="" id="service_group0_head"><tr id="service_head"><th style="color: rgb(68, 68, 68);">Brand Name</th><th style="color: rgb(68, 68, 68);">Status</th><th style="color: rgb(68, 68, 68);">Manufacturer</th><th style="color: rgb(68, 68, 68);">Launch Country</th><th style="color: rgb(68, 68, 68);">License No</th><th style="color: rgb(68, 68, 68);">Strength</th><th style="color: rgb(68, 68, 68);">Dose Form</th><th style="color: rgb(68, 68, 68);">Quantity Required</th><th colspan="1" style="color: rgb(68, 68, 68);" data-type="numeric">Date Requested</th><th data-sort-ignore="true" style="color: rgb(68, 68, 68);"> </th><th style="color: rgb(68, 68, 68);">Import Approval</th><th style="color: rgb(68, 68, 68);">Lead Time</th><th style="color: rgb(68, 68, 68);">Availability</th><th style="color: rgb(68, 68, 68);">Supplier</th><th style="color: rgb(68, 68, 68);">Buyer</th><th style="color: rgb(68, 68, 68);">Date Last Researched</th><th data-sort-ignore="true" style="color: rgb(68, 68, 68);"> </th><th data-sort-ignore="true" style="color: rgb(68, 68, 68);"> </th></tr></thead><tbody id="service_body0"><tr id="service_line0"><td data-value="Test Brand 2"><input name="service_name[0]" id="service_name_0" size="16" cols="64" title="" tabindex="116"><input name="service_product_id[0]" id="service_product_id_0" size="20" maxlength="50" value="0" type="hidden"></td><td data-value="Live"><select tabindex="116" name="service_status[0]" id="service_status_0" onchange="check_status(0)">
<option selected="" value="">-none-</option>
<option value="Live">Live</option>
<option value="Active">Active</option>
<option value="Archived">Archived</option></select></td><td data-value="man"><input style="width:115px;" name="service_manufacturer[0]"...

JavaScript

/* Create an array with the values of all the input boxes in a column */
        $.fn.dataTable.ext.order["dom-text"] = function  ( settings, col )
        {
            return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
                return $("input", td).val();
            } );
        }

        /* Create an array with the values of all the input boxes in a column, parsed as numbers */
        $.fn.dataTable.ext.order["dom-text-numeric"] = function  ( settings, col )
        {
            return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
                return $("input", td).val() * 1;
            } );
        }

        /* Create an array with the values of all the select options in a column */
        $.fn.dataTable.ext.order["dom-select"] = function  ( settings, col )
        {
            return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
                return $("select", td).val();
            } );
        }

        function insertServiceLine_2(tableid, groupid) {

    if(!enable_groups){
        tableid = "service_group0";
    }

    if (document.getElementById(tableid + '_head') !== null) {
        document.getElementById(tableid + '_head').style.display = "";
    }

    var status_hidden = document.getElementById("status_hidden").value;
    var availability_hidden = document.getElementById("availability_hidden").value;
    var import_hidden = document.getElementById("import_hidden").value;
    var strength_hidden = document.getElementById("strength_hidden").value;
    var dose_hidden = document.getElementById("dose_hidden").value;

    var oTable =  $('#service_group0').dataTable();
    oTable.dataTable().fnAddData( [
        "<input name='service_name[" + servln + "]' id='service_name_" + servln + "' size='16' cols='64' title='' tabindex='116'><input type='hidden' name='service_product_id[" + servln + "]' id='service_product_id_" + servln + "'...