JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.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.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<div class="header">
  <h1><strong>Deliverables</strong></h1>
</div>
<div class ="container">
<table id="myTable" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>USer ID</th>
      <th>ID</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
  </thead>
  <tfoot>
      <tr>
      <th>USer ID</th>
      <th>ID</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
  </tfoot>
</table>
</div>

CSS

div.container {
	min-width: 980px;
	margin: 0 auto;
}
.header {
  padding: 10px;
  text-align: center;
}
body {
	font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
}

JavaScript

function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
	//create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
    var urls = [ 'https://jsonplaceholder.typicode.com/posts', 
               'https://jsonplaceholder.typicode.com/posts', 
               'https://jsonplaceholder.typicode.com/posts' ];
       
    for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
      $.ajax({
        url: urls[i],
		'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data ).draw();
        }
      }); 
    } // missing bracket
}
$(document).ready(function() {
 var collapsedGroups = {};
    
  var table = $('#myTable').DataTable( {
    "columns": [
      { "data": "userId", visible: false },
      { "data": "id" },
      { "data": "title" },
      { "data": "body" }
    ],
	
	dom: 'Bfrtip',
	buttons: [
		'copy','csv','excel','pdf','print'
	], 
	rowGroup: {
            dataSrc: 'userId',
            startRender: function (rows,group){
            	var collapsed = !!collapsedGroups[group];
              
              rows.nodes().each(function(r) {
              	r.style.display = collapsed ? 'none' : '';
              });
              //Add category name to the <tr>.
              return $('<tr/>')
              	.append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed);
            
            }
            
        }
  } );
    
 loadData();
 $('#myTable tbody').on('click', 'tr.dtrg-start', function () {
        var name = $(this).data('name');
       ...