JSFiddle - React, Tailwind, and code Playground

by Ryan Allison

HTML

<div class="topdiv">
  <span id="spnResults"></span>
  <span id="spnForm"></span>
  <span id="spnExplanation"></span>
  
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
/* VARS */

$open-sans: 'Open Sans',
'Helvetica',
sans-serif;
$darkNavy: #213140;
$teal1: #66B3FB;
$teal2: #4B9DEA;
$charcoal: #555555;
$gold: #B6985A;
$activeShadow: 0 0 10px rgba($teal1,
.5);
/* MIXINS */

@mixin focusOutline {
  outline: dotted 1px #CCC;
  outline-offset: .45rem;
}

@mixin hideInput {
  width: 0;
  height: 0;
  position: absolute;
  left: -9999px;
}

@mixin breakpoint($point) {
  @if $point==1100 {
    @media (max-width: 1100px) {
      @content ;
    }
  }
  @else if $point==800 {
    @media (max-width: 800px) {
      @content ;
    }
  }
}

/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */

body,
html {
  margin: 0;
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: $open-sans;
  -webkit-font-smoothing: antialiased;
  background-color: #EEE;
}

fieldset {
  margin: 0 0 15px 0;
  padding: 1.5rem 2rem .5rem;
  box-sizing: border-box;
  display: block;
  border: none;
  border: solid 1px #CCC;
  min-width: 335px;
  background-color: #FFF;
  legend {
    margin: 0 0 1.5rem;
    padding: 0;
    width: 100%;
    float: left;
    display: table;
    font-size: 1.5rem;
    line-height: 140%;
    font-weight: 600;
    color: #333;
    +* {
      clear: both;
    }
  }
}

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

.topdiv {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow:hidden;
  height:92vh;
  padding: 20px 0 0 0;
}

#spnResults {
  float:left;
  margin: 0 35px 0 0;
  overflow-y:scroll;
  height:93vh;
}

#spnForm {
  float:left;
  overflow-y:scroll;
  height:93vh;
}

.winsList {
  margin-left:20px;
  display:none;
}
/* TOGGLE STYLING */

.toggle {
  margin: 0 0 1.5rem;
  box-sizing: border-box;
  font-size: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  width:100%;
  input {
    @include...

JavaScript

var globalGrpCounter = 0;

$(document).ready(function () {
    BuildForm();
    DisplayResults();
});

$(document).on("click", ".sel", function (sender) {
		globalGrpCounter = 0;
    var gameid = sender.target.name;
    var selectedTeamId = parseInt(sender.target.value);
    var otherTeamId = GetOtherTeamId(gameid, selectedTeamId);
    var selectedTeamObj = teams[selectedTeamId];
    var otherTeamObj = teams[otherTeamId];
    if (!selectedTeamObj.wins.includes(otherTeamId)) {
        selectedTeamObj.wins.push(otherTeamId);
        removeItemFromArray(selectedTeamObj.losses, otherTeamId);
        otherTeamObj.losses.push(selectedTeamId);
        removeItemFromArray(otherTeamObj.wins, selectedTeamId);
    }

    DisplayResults();
});

function DisplayResults() {
		$("#spnExplanation").html("");
    var rawOrderedTeams = teams.slice().sort(compareValues('wins'));
    var winsGroups = GetWinsGroups(rawOrderedTeams);
    var orderedTeams = SortWinsGroups(winsGroups);
    var sb = "<table>";
    for (i = 0; i < orderedTeams.length; i++) {
        sb += "<tr><td>";
        sb += "<div style='cursor:pointer;' onclick='$(\".list" + i + "\").slideToggle();'>" + orderedTeams[i].nm + "</div>";
        sb += "<div class='winsList list" + i + "'>";
        sb += "<u>Wins</u><br>"
        for (w = 0; w < orderedTeams[i].wins.length; w++) {
            sb += teams[orderedTeams[i].wins[w]].nm + "<br>";
        }
        sb += "</div>";
        sb += "</td><td style='vertical-align:top;'>";
        sb += orderedTeams[i].wins.length + "-" + orderedTeams[i].losses.length;
        sb += "</td></tr>";
    }
    sb += "</table>";
    $("#spnResults").html(sb);
}

function BuildForm() {
    var sb = "";
    for (i = 0; i < weeks.length; i++) {
        sb += "<fieldset>";
        sb += "Week " + weeks[i].num + "<br><br>";
        for (g = 0; g < weeks[i].games.length; g++) {
            var game = weeks[i].games[g];
            var gameid = game.id;
            var vteam = game.vt;
     ...