JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
</head>

<table id="ccr2018" class="table table-sm" style="font-size: small;">
  <thead>
    <tr>
      <th>Plans</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div data-toggle="tooltip" data-html="true" data-placement="top" title="" aria-describedby="tooltip129488"><button type="button" id="btnAP1182173" class="btn btn-sm dropdown-toggle mt-1 btn-primary" data-toggle="dropdown">Preparing for Industry Certification</button>
          <ul id="ddActionPlans" class="dropdown-menu csr_lnk" style="max-height: 400px; width: auto; overflow-y: auto">
            <li><input type="radio" class="d-inline ddActionPlan" id="ddActionPlan1182173-13" name="radAP1182173" value="13" onclick="ddUserSelectedActionPlanChanged(1182173, this.value);"><label for="ddActionPlan1182173-13" class="d-inline input small...

JavaScript

var lapd=
[
    {
        "actionPlanID": "13",
        "description": "No Action Plan Entered",
        "buttonColor": "btn-secondary"
    },
    {
        "actionPlanID": "1",
        "description": "Good to Go!",
        "buttonColor": "btn-success"
    },
    {
        "actionPlanID": "2",
        "description": "Preparing for ACT ALL",
        "buttonColor": "btn-primary"
    },
    {
        "actionPlanID": "3",
        "description": "Preparing for Math ACT Only",
        "buttonColor": "btn-primary"
    },
    {
        "actionPlanID": "4",
        "description": "Preparing for English/Reading ACT Only",
        "buttonColor": "btn-primary"
    },
    {
        "actionPlanID": "5",
        "description": "Preparing for KYOTE",
        "buttonColor": "btn-primary"
    },
    {
        "actionPlanID": "6",
        "description": "Preparing for EOP Assessment",
        "buttonColor": "btn-primary"
    },
    {
        "actionPlanID": "7",
        "description": "Preparing for Industry Certification",
        "buttonColor": "btn-primary"
    },
    {
        "actionPlanID": "8",
        "description": "Enrolled in Dual Credit",
        "buttonColor": "btn-primary"
    },
    {
        "actionPlanID": "14",
        "description": "OFF TRACK - NO path to TR",
        "buttonColor": "btn-danger"
    },
    {
        "actionPlanID": "11",
        "description": "Working on EWE",
        "buttonColor": "btn-primary"
    },
    {
        "actionPlanID": "12",
        "description": "In a Registered Apprenticeship",
        "buttonColor": "btn-primary"
    }
];

var dt = $('#ccr2018').DataTable({
             buttons: [
               'excelHtml5',
             ],
             dom: "<'row'<'col-sm-12 col-md-5'Q><'col-sm-12 col-md-5'f><'col-sm-12 col-md-2 text-right'B>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i>>",
           });