JSFiddle - React, Tailwind, and code Playground

HTML

<div>Cheat suggestion: <span id="cheat_msg"></span></div>
<div style="margin-bottom:20px;">Cheat counter: <span id="cheat_ctr"></span></div>

<table class="scoreTable">
	    <tr>
	      <td></td>
	      <td class="grey">Score</td>
	      <td class="grey">%</td>
	      <td class="grey">Leader</td>
	    </tr>
	    <tr class="man">
	      <td>Man</td>
	      <td id='manscore'>0</td>
	      <td id='manper'>0</td>
	      <td class="grey" id='manwin'>-</td>
	    </tr>
	    <tr class="machine">
	      <td>Machine</td>
	      <td id='machscore'>0</td>
	      <td id='machper'>0</td>
	      <td class="grey" id='machwin'>-</td>
	    </tr>
	  </table>

<table class="board" id="board">
	      <tr class="grey">
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	      </tr>
	      <tr class="man">
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	      </tr>
	      <tr class="machine">
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	      </tr>
	    </table>

JavaScript

var gameboard;
var board_idx;
var a;
var p1, c1, p2, c2;
var man_score, mach_score;
var moves;


function ZeroMatrix() {
    a = new Array(2);
    for (i=0; i<2; i++) {
	a[i] = new Array(3);
	for (j=0; j<3; j++) {
	    a[i][j] = new Array(2);
	    for (k=0; k<2; k++) {
		a[i][j][k] = new Array(3);
		for (l=0; l<3; l++) {
		    a[i][j][k][l] = new Array(2);
		    for (m=0; m<2; m++) {
			a[i][j][k][l][m] = 0;
		    }
		}
	    }
	}
    }
}


function ZeroBoard() {
    gameboard = new Array(3);
    for (i=0; i<3; i++) {
	gameboard[i] = new Array(15);
	for (j=0; j<15; j++) {
	    gameboard[i][j] = '';
	}
    }
}


function Reset() {
    ZeroMatrix();
    p1 = 0;
    c1 = 0;
    p2 = 0;
    c2 = 0;
    man_score = 0;
    mach_score = 0;
    moves = 0;
    DisplayScores();
    ZeroBoard();
    board_idx = 0;
    DisplayBoard();
}


function DisplayBoard() {
    var board = document.getElementById("board");
    for (var i = 0, row; row = board.rows[i]; i++) {
	for (var j = 0, col; col = row.cells[j]; j++) {
	    col.innerHTML = gameboard[i][j];
	}
    }
}


function DisplayScores() {
    document.getElementById('manscore').firstChild.nodeValue = man_score;
    document.getElementById('machscore').firstChild.nodeValue = mach_score;
    
    var man_per = 0, mach_per = 0;
    var total = man_score + mach_score;
    man_win = '-';
    mach_win = '-';

    if (total > 0) {
	man_per = (man_score / total) * 100;
	mach_per = (mach_score / total) * 100;
	if (man_score > mach_score) {
	    man_win = '*';
	} else if (mach_score > man_score) {
	    mach_win = '*';
	}
    }

    document.getElementById('manwin').firstChild.nodeValue = man_win;
    document.getElementById('machwin').firstChild.nodeValue = mach_win;
    document.getElementById('manper').firstChild.nodeValue = man_per.toFixed(2);
    document.getElementById('machper').firstChild.nodeValue = mach_per.toFixed(2);
}


function Judge(man_ans, mach_ans) {
    if (mach_ans != 2) {
	if (man_ans == mach_ans)...