JSFiddle - React, Tailwind, and code Playground

by BeerusDev

HTML

<!DOCTYPE html>
<html>

  <head>
    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap4.min.css" />
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" referrerpolicy="no-referrer"></script>

 ...

JavaScript

var data = [
{
	"Name": "Beerus Dev",
  "Priority": "(1) High",
  "Title": "Figure Out Why This Filter Isn't Working",
  "Status": "In Progress",
  "DueDate": "09/17/2021",
  "CompletedDate": "09/16/2021",
  "PercentageComplete": "75%",
  "AssignedToId": "35",
  "ListItemId": 1,
  "AuthorId": "26",
  "Description": "This is an example so I can show how my filter isn't working"
},
{
	"Name": "Trunks Dev",
  "Priority": "(1) High",
  "Title": "Fix the Created By Filter",
  "Status": "In Progress",
  "DueDate": "09/17/2021",
  "CompletedDate": "09/16/2021",
  "PercentageComplete": "75%",
  "AssignedToId": "35",
  "ListItemId": 3,
  "AuthorId": "25",
  "Description": "This is an example so I can show how my filter isn't working"
},
{
	"Name": "Beerus Dev",
  "Priority": "(2) Normal",
  "Title": "This is just a sample with a different list ID",
  "Status": "In Progress",
  "DueDate": "09/17/2021",
  "CompletedDate": "09/18/2021",
  "PercentageComplete": "60%",
  "AssignedToId": "35",
   "ListItemId": 2,
  "AuthorId": "25",
  "Description": "Testing Testing"
},
];
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    
    console.log(e.target.id);
    if(e.target.id === "currTable"){
    document.getElementsByTagName('title')[0].innerText = "Current Tasks";
/*     alert("Current Tasks");
     */    }
    if(e.target.id === "compTable"){
    document.getElementsByTagName('title')[0].innerText = "Completed Tasks";
/*     alert("Completed Tasks");
     */    }
});
$(document).ready(function() {
moment.suppressDeprecationWarnings = true;
var queryString = 3;
var createByID = 26;
var thisUserTitle = "Beerus Dev";
$.fn.dataTable.ext.search.push(
    function( settings,searchData, data, dataIndex ) {
          
      var tableUserTitle = searchData[0]; 
      var authorID1 = searchData[8];
      var authorID2 = searchData[9];
      var itemID = searchData[7]; 
			if (settings.sTableId === 'exampleTable' ) {
      if(authorID1 == createByID){
       ...