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

const SQUARE_OFF = 0;
const SQUARE_ON  = 1;

function toggleHighlight(event) {
    var cell = event.target;
    var cellStatus = (squareStatus[cell.id] === SQUARE_OFF) ? SQUARE_ON : SQUARE_OFF;
    
    squareStatus[cell.id] = cellStatus;
    
    cell.style.backgroundColor = (cellStatus === SQUARE_OFF) ? '#fff' : '#cecece';
}    
    
var cells = document.getElementsByTagName('td');
var squareStatus = {};

for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener('click', toggleHighlight);
    
    squareStatus['square' + i] = SQUARE_OFF;
}