JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
	<!-- Bootstrap -->
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
	<!-- Datatables -->
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
	<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset=utf-8 />
	<title>Move It & Lose It DataTable</title>
</head>
<body>
	<div class="container">
		<!--<input type="text" class="global_filter" id="global_filter">-->
		<div class="clearfix"></div>
		<ul class="nav nav-tabs">
			<li class="active"> <a href="#1" data-toggle="tab">Weekly Weight &Delta;</a>
			</li>
			<li><a href="#2" data-toggle="tab">Overall Weight &Delta;</a>
			</li>
			<li><a href="#3" data-toggle="tab">Weekly Steps</a>
			</li>
            <li><a href="#4" data-toggle="tab">Overall Steps</a>
			</li>
            <li><a href="#5" data-toggle="tab">Weekly Minutes</a>
			</li>
            <li><a href="#6" data-toggle="tab">Overall Minutes</a>
			</li>
            <li><a href="#7" data-toggle="tab">Points from Steps</a>
			</li>
            <li><a href="#8" data-toggle="tab">Points from Exercise</a>
			</li>
            <li><a href="#9" data-toggle="tab">Weekly Winners</a>
			</li>
		</ul>
		<div class="tab-content ">
			<div class="tab-pane active" id="1">
				<table id="weeklyweight" class="table table-striped table-hover table-bordered"...

CSS

.pageheadh {
      font-size: 30px;
      font-weight: bolder;
      color: black;
      text-align: center;
  }
  .pageheadp {
      text-align: center;
      color: black;
      font-weight: bold;
  }
  #sideNavBox {
      display: none;
    }
  .ms-core-pageTitle {
      display: none;
   }
   .container {
       margin-right: auto;
       margin-left: auto;
   }
   #contentRow{
       padding-right: 20px;
   }

JavaScript

function loadData() {
    var webUrl = _spPageContextInfo.webabsoluteurl;
    var urls = [webUrl + "/_api/web/lists/getbytitle('ContestInformation')/items?$select=Name/Id,Name/Title,Weight,WeeklyWeight,Steps,WeeklySteps,ExerciseMinutes,WeeklyExerciseMin,StepPoints,MinutePoints&$expand=Name",
            webUrl + "/_api/web/lists/getbytitle('WeeklyWinners')/items?$select=Name/Id,Name/Title,Week,Category,Prize&$expand=Name"
        ];
    
        for (i = 0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
            $.ajax({
                url: urls[i],
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                        var table = $('#weeklyweight').DataTable();
                        var table1 = $('#overallweight').DataTable();
                        var table2 = $('#weeklysteps').DataTable();
                        var table3 = $('#overallsteps').DataTable();
                        var table4 = $('#weeklyminutes').DataTable();
                        var table5 = $('#overallminutes').DataTable();
                        var table6 = $('#steppoints').DataTable();
                        var table7 = $('#minutepoints').DataTable();
                        var table8= $('#weeklywinners').DataTable();
                        table.rows.add(data.d.results).draw();
                        table1.rows.add(data.d.results).draw();
                        table2.rows.add(data.d.results).draw();
                        table3.rows.add(data.d.results).draw();
                        table4.rows.add(data.d.results).draw();
                       ...