JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="row" id="SecondDoseEligDataDiv">
  <div class="row">
    <h6 style="font-weight: bold;">Second Dose Data Collection</h6>
  </div> 
  <div class="row">
    <p>To see all records that need to be evaluated for Second Dose, click Get Records</p>
  </div>  
  <div class="row">
    <p>To send updated records to database,click Update Records</p>
  </div>
  <div class="row">
    <!--<div class="col s8 m8 l8">-->
    <form id="secondDoseEligDataForm" 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="secondDoseEligData_search_submit" value="search" onclick="search_2nd_dose_elig_data(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="secondDoseEligData_submit" value="update"...

CSS

select {
  width: 150px;
}

JavaScript

function search_2nd_dose_elig_data(e) {
  e.preventDefault();
  ResetHandler_SecondDoseEligDataForm(); //remove existing table
  $("#secondDoseEligData_search_submit").attr("disabled", "disabled");
  $("#secondDoseEligData_submit").attr("disabled", "disabled");

  var result = [['001','Fname','Lname','Comp','2021-08-24',"","","","","","",""]]
  //display table of records
  $('#secondDoseEligData_table').DataTable({
    "pageLength": 5,
    "lengthChange": false,

    data: result,
    "columnDefs": [{
        "targets": [5],
        render: function(data, type, row, meta) {
          var $select = $("<select class='browser-default'>" +
            "<option value='' disabled='disabled'>Choose your option</option>" +
            "<option value='No'>No</option>" +
            "<option value='Cancer'>Cancer</option>" +
            "<option value='DM'>DM</option>" +
            "<option value='Heart Disease'>Heart Disease</option>" +
            "<option value='Hypertension'>Hypertension</option>" +
            "<option value='HIV'>HIV</option>" +
            "<option value='Chronic lung disease'>Chronic lung disease</option>" +
            "<option value='GIT'>GIT</option>" +
            "<option value='MCS'>MCS</option>" +
            "<option value='Immunological'>Immunological</option>" +
            "<option value='Chronic Neurological Disease'>Chronic Neurological Disease</option>" +
            "<option value='Chronic neuromuscular disease'>Chronic neuromuscular disease</option>" +
            "<option value='Skin'>Skin</option>" +
            "<option value='Vascular'>Vascular</option>" +
            "<option value='Other'>Other</option></select>");

          $select.find('option[value="' + data + '"]').attr('selected', 'selected');
          return $select[0].outerHTML;
        }
      },
      {
        "targets": [6],
        render: function(data, type, row, meta) {
          var $select = $("<select class='browser-default'><option value=''>Choose Your...