JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<div class="row" id="firstDoseEligibilityDiv">
  <div class="row">
    <h6>To see all records that need to be evaluated for First Dose Eligibility, click Get Records</h6>
  </div>
  <div class="row">
    <h6>To send updated records to database,click Update Records</h6>
  </div>
  <div class="row">
    <!--<div class="col s8 m8 l8">-->
    <form id="firstDoseEligibilityForm" class="col s12 m12 l12">
      <div class="row">
        <!--<div class="col s6 m4 l2">-->
        <div class="input-field col s2 m2 l1 left-align">
          <button class="btn waves-effect waves-light" type="submit" id="firstDoseEligibility_search_submit" value="search" onclick="search_1st_dose_eligibility(event);">Get Records</button>
        </div>
        <div class="input-field col s2 m2 l1 left-align">
          <button class="btn waves-effect waves-light" type="submit" id="firstDoseEligibility_submit" value="update" onclick="update_1st_dose_eligibility(event);">Update Records</button>
        </div>
      </div>
      <div class="table-responsive">
        <table id="firstDoseEligibility_table" class="display" style="overflow-X: auto; max-width: 100%;margin: auto;">
          <!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION -->
        </table>
      </div>
    </form>
    <!--</div>-->
  </div>
</div>

JavaScript

function search_1st_dose_eligibility(e) {
  e.preventDefault();

  // ResetHandler_firstDoseEligibilityForm(); //remove existing table

  $("#firstDoseEligibility_search_submit").attr("disabled", "disabled");
  $("#firstDoseEligibility_submit").attr("disabled", "disabled");
  var result = [
    ['01', 'Fname', 'Lname', 'VComp', '24', 'No', 'No', 'No', '', '', 'No', 'A', "", "", ""]
  ]
  //display table of records
  $('#firstDoseEligibility_table').DataTable({
    "pageLength": 5,
    data: result,
    "columnDefs": [{
        "targets": [12],
        render: function(data, type, row, meta) {
          var a = result.indexOf(row);
          var $select = $("<select class = 'browser-default' id='eligible_1st_" + a + "'><option value='Yes'>Yes</option><option value ='Y'>Y</option><option value ='No'>No</option</select>");
          $("#eligible_1st_" + a).val("");
          return $select.prop("outerHTML")
        }
      },
      {
        "targets": [13],
        render: function(ditem) {
          return "<input type='date' value = '" + ditem + "'/>";
        }
      },
      {
        "targets": [14],
        render: function(ditem) {
          return "<textarea rows='4' cols='80' value = '" + ditem + "'/>";
        }
      }
    ],
    columns: [{
        "title": "FQM Mine Numer"
      },
      {
        "title": "First Name"
      },
      {
        "title": "Last Name"
      },
      {
        "title": "Company"
      },
      {
        "title": "Age"
      },
      {
        "title": "Underlying conditions"
      },
      {
        "title": "Allergies towards previous vaccines"
      },
      {
        "title": "Active COVID-19 infection"
      },
      {
        "title": "Date of previous COVID-19 infection"
      },
      {
        "title": "No. of Weeks from COVID Diagnosis"
      },
      {
        "title": "Pregnant"
      },
      {
        "title": "Tier"
      },
      {
        "title": "Eligible",
        "className": ""
      },
      {
       ...