JSFiddle - React, Tailwind, and code Playground

HTML

<select id='playersSelect' size='10' multiple="multiple">
</select>
<div class='control'>
    <button id="start" onclick='startBattle()'>Start</button>
    <button id="selectAll" onclick='selAll()'>All</button>
    <button id="deselectAll" onclick='deSelAll()'>None</button>
</div>
<table class="mtable">
<thead>
    <tr id="tableHead">
        <th>####</th>
    </tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>

CSS

html * { font-family: Consolas, Arial, sans-serif; }
select { width: 100%; margin: 12px 0 0 0; }
button, select, input { font-size: 100%; }
input { text-align: right; }
textarea { font-family: "Courier New", monospace; }
textarea[readonly] { background-color: #eee; width: 100%; }
canvas { margin: 12px 0 0 0; border: 2px solid gray; }
#playersSelect {background-color: #AAA;}
#selectAll {
    position: absolute;
    right: 80px;}
#deselectAll {
    position: absolute;
    right: 10px;}
table {
  font-family: sans-serif;
  border-collapse: collapse;
  margin: 30px 0 0 0;
}

thead th {
   -moz-transform: rotate(-90deg);  /* FF3.5+ */
   -o-transform: rotate(-90deg);  /* Opera 10.5 */
   -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */
   vertical-align: top;
   padding: 15px 0;
} 
th {
  color: #666;
  font-weight: normal;
}
td{
  padding: 10px;
  text-align: center;
  border: solid 1px #999;
}

JavaScript

var qid = 51698
var site = "codegolf"
var roundRobinRounds= 50;
var duelLen= 66;
var players = []
var dq = [] //user ids of disqualified users

$(document).ready(function() {
    $("#start").attr("disabled", true);
    $("#selectAll").attr("disabled", true);
    $("#deselectAll").attr("disabled", true);
    loadEntries()
})

function loadEntries() {
    var codePattern = /<pre><code>((?:\n|.)*?)\n<\/code><\/pre>(?:\n|.)*?<pre><code>((?:\n|.)*?)\n<\/code><\/pre>/
    var minVote = -2, editTime = 8 * 3600 //8 hours
    var page = 1
    var uids = []
    var disqualified = $('#disqualified'), invalid = $('#invalid')
    
    function runQuery(page, callback) {
        url = 'https://api.stackexchange.com/2.2/questions/'
        + qid.toString() + '/answers?page='
        + page.toString() + '&pagesize=100&order=asc&sort=creation&site='+site+'&filter=!JDuPcYJfXobC6I9Y-*EgYWAe3jP_HxmEee'
        $.get(url, callback)
    }

    
    function loadPage(data) {
        data.items.forEach(function (entry) {
            function append(entry, elem) {
                elem.append(' ')
                .append($('<a>')
                .text(entry.owner.display_name)
                .attr('href', entry.link))
            }
            function decodeEntities(s) {
                return $('<textarea>').html(s).text()
            }
            
            entry.owner.display_name = decodeEntities(entry.owner.display_name) 
            if (dq.indexOf(entry.owner.user_id) > -1 //user marked as disqualified
            ) {
                return   
            }
            uids.push(entry.owner.user_id)
            
            //check if invalid
            var match = codePattern.exec(entry.body)
            if (match === null || match.length <= 1) {
                //append(entry, invalid)
                return 
            }
            
            //set up player
            var player = {}
	        var params = {}
	        player.stats =...