JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.2.1/dt-1.10.16/b-1.5.0/b-html5-1.5.0/b-print-1.5.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.2.1/dt-1.10.16/b-1.5.0/b-html5-1.5.0/b-print-1.5.0/datatables.min.css">
    <form id="form1" runat="server">
        <div class="row zero-margin">
            <div class="col-xs-12">&nbsp;</div>
            <div class="col-xs-2 form-group">
                <input class="form-control input-sm" id="tbJobNumber" type="text" placeholder="Job Number" />
            </div>
            <div class="col-xs-2 form-group">
                <input class="form-control input-sm" id="tbJobName" type="text" placeholder="Job Name" />
            </div>
            <div class="col-xs-2 form-group">
                <input class="form-control input-sm" id="tbCustomerName" type="text" placeholder="Customer Name" />
            </div>
            <div class="col-xs-2 form-group">
                <input class="form-control input-sm" id="tbCustomerLocation" type="text" placeholder="Customer Location" />
            </div>
            <div class="col-xs-2 form-group">
                <input class="form-control input-sm" id="tbSalesPerson" type="text" placeholder="Sales Person" />
            </div>
            <div class="col-xs-2">
                <input type="button" class="btn btn-primary align-middle" id="btnSearch" value="Search" />
                <input type="button" class="btn btn-danger align-middle" id="btnClear" value="Clear" />
            </div>
        </div>
        <div class="row zero-margin">
            <div class="col-xs-2 form-group">
                <label class="form-control-addon" for="tbJobStartDateFilterBegin">Job Start Date Filter Begin</label>
                <input...

CSS

#myJumbo {
    padding: 25px !important;
}

label {
    font-size: 10px;
}

.form-group {
    margin-bottom: 5px !important;
}

.form-control {
    margin-bottom: 5px !important;
}

.form-control-addon {
    margin-bottom: 0 !important;
}

.zero-margin {
    margin: 0 !important;
}

.fifteen-margin {
    margin: 0px 15px !important;
}

.vertical-middle {
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
}

JavaScript

$(document).ready(function () {
	var TableData = [
["14440", "MODIFY EXISTING FB-10 PRESS", "12/18/2017", "REGAL-BELOIT CORP", "Monterrey 2 Plant", "Bruce Eberly"],
["14514", "FORD CD4.2 BEIJING 6 GPF CALIBRATION TOOLING", "12/13/2017", "Tenneco", "Ligonier, IN", "Brian Pikel"],
["14519", "T1XX HD", "12/12/2017", "Tenneco", "Angola, IN", "Erik Linnemeier"],
["14528", "GEN 3 LOWER LIFT PARTS", "12/19/2017", "Tenneco", "Marshal MI", "Dave Keipper"],
["FORD C483 ROUND CALIBRATION TOOLING", "14527", "12/20/2017", "Tenneco", "Litchfield MI", "Brian Pikel"]
];

    var ThisDataTable = $('#MyTable').DataTable({
      data: TableData,
      buttons: [
        {
          extend: 'pdfHtml5',
          download: 'open'
        },
        'print'
      ],
      columns: [
        { title: "Number" },
        { title: "Name" },
        { title: "Start Date" },
        { title: "Customer" },
        { title: "Location" },
        { title: "Sales Person" }
      ]
    });

    $('#btnSearch').click(function () {
        var formData = '{';
        formData += 'JobNumber : "' + $('#tbJobNumber').val() + '"';
        formData += ',JobName : "' + $('#tbJobName').val() + '"';
        formData += ',CustomerName : "' + $('#tbCustomerName').val() + '"';
        formData += ',CustomerLocation : "' + $('#tbCustomerLocation').val() + '"';
        formData += ',SalesPerson : "' + $('#tbSalesPerson').val() + '"';
        formData += ',JobStartDateFilterBegin : "' + $('#tbJobStartDateFilterBegin').val() + '"';
        formData += ',JobStartDateFilterEnd : "' + $('#tbJobStartDateFilterEnd').val() + '"';
        formData += '}';

        $.ajax({
            type: 'POST',
            url: 'ws/JobSearch.asmx/FindJobs',
            cache: false,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: formData,
            success: function (data, status) {
                var TableBody = document.getElementById('TableBody');

               ...