JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>PMG List - My ASP.NET Application</title>
    <link href="/Content/css?v=zahK5dSPn4UH7X-i1HsDBKWSOyweZsrXu_tyXNSIQfQ1" rel="stylesheet" />


    <link rel="stylesheet" href="/Content/DataTable/datatables.css">

    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
    
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>




  </head>

  <body data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">


        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="/Home">B/S/H/ Dish Care</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar">
          <ul class="nav navbar-nav">
            <li><a href="/Home">Home</a></li>
            <li><a href="/Home/About">About</a></li>
            <li><a href="/CollisionReports">Collision Reports</a></li>
            <li><a href="/">PMG List</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Administration
                 ...

JavaScript

var pmgListTable;
$(document).ready(function() {
  pmgListTable = $('#pmgListTable').DataTable({
    scrollY: '70vh',
    autowidth: true,
    paging: false,
    searching: true
  });

  if (localStorage.getItem('includeSentItems') === null) {
    localStorage.getItem('includeSentItems') = $('#includeSentItems')[0].checked;
  } else if (localStorage.getItem('includeSentItems') == false) {
    $('#includeSentItems')[0].checked = false;
    pmgListTable.column(1).search('Draft').draw();
  } else {
    $('#includeSentItems').bootstrapToggle('on');
    pmgListTable.column(1).search('').draw();
  }

  if (localStorage.getItem('showAllItems') === null) {
    localStorage.getItem('showAllItems') = $('#showAllItems')[0].checked;
  } else if (localStorage.getItem('showAllItems') == false) {
    $('#showAllItems')[0].checked = false;
    packageListTable.column(2).search($('#username')).draw();
  } else {
    $('#showAllItems')[0].checked = true;
    packageListTable.column(2).search('').draw();
  }
});

$(function() {
  $('input:checkbox').change(function() {
    var username = $('#username')[0].innerText;
    switch (this.id) {
      case 'includeSentItems':
        if (this.checked == true) {
          packageListTable.column(1).search('').draw();
        } else {
          packageListTable.column(1).search('Sent').draw();
        }
        localStorage.setItem("includeSentItems", this.checked);
        break;

      case 'showAllItems':
        if (this.checked == true) {
          packageListTable.column(2).search('').draw();
        } else {
          packageListTable.column(2).search(username).draw();
        }
        localStorage.setItem("showAllItems", this.checked);
        break;
    }
  })
})