JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
        <div class="col-xs-12 text-center" id="Loading" ><i class="wait fa fa-spinner fa-pulse"></i><br /><br /><span></span></div>
        <div class="container" id="MainContainer" hidden>
            
            
            <div class="col-xs-12">
                <div class="row pull-right text-right">
                    <div class=" top_company">
                        <div class="col-xs-4 " id="Companydiv">
                            <select name="Company" id="Company" style="width: 200px">
	<option selected="selected" value="2" data-create="True" data-view="True" data-override="True" data-departments="All|-1|Dept1|73||Dept2|74||Buying|75" data-divisions="All|-1|Div1|46||Ordering|47">ASDA</option>
	<option value="4" data-create="True" data-view="True" data-override="True" data-departments="All|-1|" data-divisions="All|-1|">GAP</option>
	<option value="3" data-create="True" data-view="True" data-override="True" data-departments="All|-1|" data-divisions="All|-1|">Walmart</option>
</select></div>
                        <div class="col-xs-4 " id="Divisiondiv" hidden>
                            <select name="Division" id="Division" style="width: 200px">
</select></div>
                        <div class="col-xs-4 " id="Departmentdiv" hidden>
                            <select name="Department" id="Department" style="width: 200px">
</select></div>
                        <input name="userType" type="text" id="userType" hidden="" value="EXEC" />
                    </div>
                </div>
            </div>
            <div id="advanced" class="advanced" cssclass="fancybox-wrap">
                <div class="row" style="display: inline">
                    <span style="font-size:20px;color:red"><i style="margin-left: 10px;"class="fa fa-times closeFancybox...

JavaScript

$(document).ready(function () {
    $("#SearchTable").DataTable({
        initComplete: function () {
            this.api().columns().every(function () {
                var column = this;
                var select = $("<select><option value=\"\"></option></select>")
                    .appendTo($(column.footer()).empty())
                    .on("change", function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ? "^" + val + "$" : "", true, false)
                            .draw();
                    });

                column.data().unique().sort().each(function (d, j) {
                    alert(d)
                    select.append('<option style=\"color:#000000;\" ">' + d + '</option>');
                    //select.append( '<option value="'+d+'">'+d+'</option>' )
                });
            });
        }
    });
});