JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table id="lines"><thead><tr><td style="padding: 5px!important; font-size: 12px; font-weight: bold;" colspan="17">Filter by:  Strength:
<select id="strength_search" name="strength_search">
<option value="One">1</option>
<option value="two">2</option>
<option value="three">3</option></select>
&nbsp;Dose Form: <select id="dose_search" name="dose_search">
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option></select>
</td></tr><tr><th>Brand Name</th><th>Status</th><th>Manufacturer</th><th>Launch Country</th><th>License No.</th><th>Strength</th><th>Dose Form</th><th>Quantity</th><th>Date Requested</th><th>Import Approval</th><th>Lead Time</th><th>Availability</th><th>Supplier</th><th>Buyer</th><th>Date Last Researched</th><th> </th><th> </th></tr></thead><tbody><tr><td><input id="brand_name0" name="brand_name[]" value="zaho" size="15" type="text"></td><td><select id="status0" name="status[]"><option selected="selected" value=""></option><option value="Live">Live</option><option value="Active">Active</option><option value="Archived">Archived</option></select></td><td><input id="manufacturer0" name="manufacturer[]" value="" size="11" type="text"></td><td><input id="launch_country0" name="launch_country[]" value="" size="11" type="text"></td><td><input id="license_no0" name="license_no[]" value="" size="11" type="text"></td><td><select id="strength0" name="strength[]" style="width:70px;"><option selected="selected" value="One">1</option><option value="two">2</option><option value="three">3</option></select></td><td><select id="dose_form0" name="dose_form[]" style="width:70px;"><option selected="selected" value="four">4</option><option value="five">5</option><option value="six">6</option></select></td><td><input id="quantity0" name="quantity[]" value="0" size="11"...

JavaScript

$(document).ready(function() {

                    $.fn.dataTableExt.ofnSearch["html-input"] = function(value) {
                        return $(value).val();
                    };

                     var table = $("#lines").DataTable({
                        "searching": true,
                        "ordering":  true,
                        columnDefs: [
                            {"targets": [15, 16 ], "searchable": false,"orderable": false},
                            { "type": "html-input", "targets": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14] }
                        ],

                     });

                        $("#lines td input").on("change", function() {
                            var td = $(this).parent();

                            console.log($(this).parent().find("input").val());
                            table.row($(this).closest("tr")).invalidate();
                        });

                        // Apply the search
                         $("#strength_search").on("change", function(){
                            table
                                .columns( 6 )
                                .search( this.value )
                                .draw();
                        });
                        $("#dose_search").on("change", function(){
                            table
                                .columns( 7 )
                                .search( this.value )
                                .draw();
                        });
    $("#insert").click(function(e){ 
				e.preventDefault();
        var tableid = "lines";
    servln = $('#lines tbody tr').length;
    servln +1;
        
        var status_hidden = 'Live';
        var import_hidden = 'Yes';
        var strength_hidden = 'two';
        var dose_hidden = 'five';
        var availability_hidden = 'Yes';
        	var oTable =  $('#lines').dataTable();
    oTable.fnAddData( [
        "<input name='brand_name[]' id='brand_name" + servln + "'...