JSFiddle - React, Tailwind, and code Playground

by Jimmy Genslinger

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="tab-pane fade in col-xs-12" id="Grades">
  <div class="col-xs-12 col-sm-12 col-md-6" align="center">
    <label style="width: 75%">
      <h3>Middle School Grades</h3></label>
    <table id="msGrades" class="tblGrades" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th></th>
          <th>School Year</th>
          <th>Grade</th>
          <th>School</th>
          <th>GPA</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

JavaScript

var iTermGPACounter = 1;
var iCourseCounter = 1;

$(document).ready(function() {
  loadDetailsByCourse();
});

function loadDetailsByCourse() {
  var yearTable = $('#msGrades').DataTable({
    data: [{
      "__type": "DMC.WebServices.detailGPA",
      "schoolYearLabel": "14-15",
      "schoolLevel": "02",
      "location": "Highland",
      "grade": "7",
      "gpaValue": "3.119",
      "termGPA": [{
        "term": "1",
        "gpaValue": "3.857",
        "termCourseGrades": [{
          "courseNo": "38929712",
          "sectionNo": "200",
          "courseName": "HEALTH 2",
          "letterGrade": "A+",
          "department": "EL"
        }, {
          "courseNo": "32320711",
          "sectionNo": "10",
          "courseName": "LANG ARTS 2",
          "letterGrade": "A+",
          "department": "EL"
        }, {
          "courseNo": "32720711",
          "sectionNo": "10",
          "courseName": "MATH 2",
          "letterGrade": "B",
          "department": "MA"
        }]
      }, {
        "term": "2",
        "gpaValue": "3.714",
        "termCourseGrades": [{
          "courseNo": "38929712",
          "sectionNo": "200",
          "courseName": "HEALTH 2",
          "letterGrade": "A",
          "department": "EL"
        }, {
          "courseNo": "32320711",
          "sectionNo": "10",
          "courseName": "LANG ARTS 2",
          "letterGrade": "A",
          "department": "EL"
        }, {
          "courseNo": "32720711",
          "sectionNo": "10",
          "courseName": "MATH 2",
          "letterGrade": "A-",
          "department": "MA"
        }]
      }]
    }, {
      "__type": "DMC.WebServices.detailGPA",
      "schoolYearLabel": "15-16",
      "schoolLevel": "02",
      "location": "Highland",
      "grade": "8",
      "gpaValue": "3.123",
      "termGPA": [{
        "term": "1",
        "gpaValue": "3.143",
        "termCourseGrades": [{
          "courseNo": "32320711",
          "sectionNo": "12",
          "courseName":...