JSFiddle - React, Tailwind, and code Playground

HTML

<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		
	</table>

CSS

table,td{
	border: 1px solid;
	border-collapse: collapse;
}

td{
	width: 50px;
	height: 50px;
	display: inline-block;
	vertical-align: top;
}

.x:after {
    content: '✕';
    color: green;
    font-size: 35px;
    position: relative;
	left: 10px;
   
}

.o:after {
    font-weight: bold;
    color: red;
    content: '◯';
    font-size: 40px;
    position: relative;
	left: 10px;
}

JavaScript

var td = document.getElementsByTagName("td")


var count = 0;

for(var i = 0; i < td.length; i++){
	td[i].addEventListener("click", function(e){
  	if(count == 0 && (!e.target.classList.contains('o'))){
    	e.target.classList.add('x');
      count = 1;
      console.log(count)
    }
	else if(count == 1 && (!e.target.classList.contains('x'))){
  		e.target.classList.add('o');
      count = 0
       console.log(count)
    }
	})
}