JSFiddle - React, Tailwind, and code Playground

HTML

<table class="bingo">
    <tr>
			<td id="square0"></td>
			<td id="square1"></td>
			<td id="square2"></td>
	</tr>
	<tr>
			<td id="square3"></td>
			<td id="square4"></td>
			<td id="square5"></td>

	</tr>
	<tr>
			<td id="square6"></td>
			<td id="square7"></td>
			<td id="square8"></td>
	</tr>
</table>

CSS

table, th, td { 
	border: 1px solid #000;
	border-collapse: collapse;
	font-size: 1.0rem;
	margin: 25px auto 0px auto;
	text-align: center;
}

th, td {
	padding: 5px 10px;
}

/* bingo table */
.bingo th {
	color: red;
	padding: 10px;
}

.bingo  td {
	color: #000;
	padding: 20px;
}

JavaScript

var toggleHighlight = function (e) {
    var bg = e.target.style.backgroundColor;
    if (bg == 'red') {
        e.target.style.backgroundColor = '';
    } else {
        e.target.style.backgroundColor = 'red';   
    }
}

var prepareTable = function () {
    var cells = document.getElementsByTagName("td");
    for (var i = 0 ; i < cells.length ; i++) {
        cells[i].onclick = function(event) {
            toggleHighlight(event);
        }
    }
}

document.onload = prepareTable();