JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

table, th, td {
  border: 1px solid black;
}

JavaScript

$(function() {

  var myObj, i, j, x = "";
  myObj = {
    "status": 1,
    "data": [{
        "id": "17",
        "tahun": "2021",
        "bln": "1",
        "nama": "2",
        /*"1": {
            "shift": "8",
            "namashift": "SHIFT PAGI",
            "description": "MASUK PAGI",
            "checkin": "07:00:00",
            "checkout": "14:00:00",
            "unit": "2906"
        },*/
        "2": {
          "shift": "9",
          "namashift": "SHIFT SORE",
          "description": "MASUK SORE",
          "checkin": "14:00:00",
          "checkout": "21:00:00",
          "unit": "2906"
        },
        "3": {
          "shift": "5",
          "namashift": "REGULER SSRK",
          "description": "JAM KERJA REGULER SENIN-KAMIS",
          "checkin": "07:00:00",
          "checkout": "14:00:00",
          "unit": "2906"
        },
        "4": {
          "shift": "10",
          "namashift": "SHIFT MALAM",
          "description": "MASUK MALAM",
          "checkin": "21:00:00",
          "checkout": "07:00:00",
          "unit": "2906"
        },
        "5": {
          "shift": "8",
          "namashift": "SHIFT PAGI",
          "description": "MASUK PAGI",
          "checkin": "07:00:00",
          "checkout": "14:00:00",
          "unit": "2906"
        },
        "6": {
          "shift": "9",
          "namashift": "SHIFT SORE",
          "description": "MASUK SORE",
          "checkin": "14:00:00",
          "checkout": "21:00:00",
          "unit": "2906"
        },
        "7": {
          "shift": "10",
          "namashift": "SHIFT MALAM",
          "description": "MASUK MALAM",
          "checkin": "21:00:00",
          "checkout": "07:00:00",
          "unit": "2906"
        },
        "8": {
          "shift": "8",
          "namashift": "SHIFT PAGI",
          "description": "MASUK PAGI",
          "checkin": "07:00:00",
          "checkout": "14:00:00",
          "unit": "2906"
        },
        "9": {
          "shift":...