JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<form id="search-form">
  <div class="form-group">
    <br>
    <div class="form-base">
      <div class="col-md">
        <label for="API"><b>API:</b></label>
        <select class="form-control" name="API" id="API" required="true">
		<option value="fourteen">14 column result</option>
		<option value="twelve">12 column result</option>
	</select> <br>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary" id="submit-button">Submit</button>
      </div>
    </div>

  </div>
</form>

JavaScript

var result = [];
			var APIheadings = [];
			var outerHTML = document.createElement('div');
			outerHTML.className = "container-fluid";
			outerHTML.id = 'outer-HTML';
			var table = document.createElement('table');
			table.id = 'result-table';
			table.className = 'table table-striped';
			var tableHead = document.createElement('thead');
			var firstRow = document.createElement('tr');

			var columnHeading = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
			columnHeading.forEach(function(headerCell) {
			  var th = document.createElement('th');
			  th.appendChild(document.createTextNode(headerCell));
			  firstRow.appendChild(th);
			})

			tableHead.appendChild(firstRow);
			table.append(tableHead);
			document.body.appendChild(table);

			displaytable = $('#result-table').dataTable({
			  columnDefs: [{
			    className: "dt-center",
			    targets: [0, 1, 2, 3, 4, 5, 6, 7, 8]
			  }],
			  "lengthMenu": [
			    [100, 200, 500, -1],
			    [100, 200, 500, "All"]
			  ]
			});

			function addBody(heading) {

			  while (firstRow.lastChild) {
			    firstRow.removeChild(firstRow.lastChild);
			  }

			  heading.forEach(function(headerCell) {
			    var th = document.createElement('th');
			    th.appendChild(document.createTextNode(headerCell));
			    firstRow.appendChild(th);
			  });
			}

			var header_map = new Map([
			  ["fourteen", ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"]],
			  ["twelve", ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]]
			]);


			var datamap = new Map([
			  ["fourteen",
			  [
			    ['2018-07-02 09:54:58',
			      '0',
			      'xx',
			      'xx',
			      'xx',
			      'xx',
			      'xx',
			      'xx',
			      'xx',
			      'xx',
			      null,
			      null,
			      '2114',
			      'xx'
			    ],
			    ['2018-07-02 09:54:57',
			      '0',
			      'xx',
			      'xx',
			      'xx',
			      'xx',
			      'xx',
			      'xx',
			     ...