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="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.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="apptMissedDiv">
  <div class="row">
    <h6 style="font-weight: bold;">Missed Appointment Status Update</h6>
  </div> 
  <div class="row">
    <p style="text-align:left"><b>Get Records</b> : Returns all appointments that have Appointment Dates in the past or as of today.<br>
    <b>Update Records</b> : Sends updated records to the database.
    </p>
  </div>
  <div class="row">
    <!--<div class="col s8 m8 l8">-->
    <form id="apptMissedForm" 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 cyan waves-lightt" type="submit" id="apptMissed_search_submit" value="search" onclick="display_scheduled_appt(event);">Get Records</button>
        </div>
        <div class="input-field col s2 m2 l1 left-align">
          <button class="btn waves-effect cyan waves-light"...

JavaScript

function send_missed_status(e) {
  e.preventDefault();
  $("#apptMissed_search_submit").attr("disabled", "disabled");
  $("#apptMissed_submit").attr("disabled", "disabled");
  if (!$.fn.DataTable.isDataTable('#apptMissed_table')) {
    return;
  }
  var dtdata = $('#apptMissed_table').DataTable();
  var checked_rows = $(dtdata.$('input[type="checkbox"]').map(function() {
    return $(this).prop("checked") ? $(this).closest('tr') : null;
  }))
  var checked_data = dtdata.rows( checked_rows ).data().toArray();
  console.log(checked_data);
  if (checked_data.length == 0) {
    M.toast({
      html: "No records Updated",
      displayLength: 1200
    });
    return;
  }
  
    $('#apptMissed_search_submit').removeAttr("disabled");
    $('#apptMissed_submit').removeAttr("disabled");
    display_scheduled_appt(e);
 
}


function display_scheduled_appt(e) {
  e.preventDefault();
  ResetHandler_searchForm('apptMissed_table'); //remove existing table
  $("#apptMissed_search_submit").attr("disabled", "disabled");
  $("#apptMissed_submit").attr("disabled", "disabled");


  var result = [
    ["B01", "2021-12-27", "T", "R1", "R2", "No", "M", "M", "N1", "N2", "S", "Scheduled", "2021-12-28", "10:00-10:30", ""]
  ];

  //display table of records
  $('#apptMissed_table').DataTable({
    "pageLength": 10,
    data: result,
    "columnDefs": [{
      "targets": [14],
      render: function(data, type, row, meta) {
        return "<label><input type='checkbox' class='filled-in checkbox-cyan' id = 'missed'><span>" + data + "</span></label>";
      }
    }],
    columns: [{
        "title": "Book Reference"
      },
      {
        "title": "Date of Referral"
      },
      {
        "title": "Health Facility"
      },
      {
        "title": "Referring Doctor"
      },
      {
        "title": "Referred Doctor"
      },
      {
        "title": "FQM"
      },
      {
        "title": "Medical Number"
      },
      {
        "title": "FQM Mine Number"
      },
      {
       ...