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")



for(var i = 0; i < td.length; i++){
	td[i].addEventListener("click", function(){
		this.classList.add('x');
			if(this.classList.contains('x')){
				for(var i = 0; i < td.length; i++){
					td[i].addEventListener("click", function(){
						this.classList.add('o');
								if(this.classList.contains('o')){
									for(var i = 0; i < td.length; i++){
										td[i].addEventListener("click", function(){
											this.classList.add('x');
								
										})
	
									}
								}
						})
	
				}
			}
	})
	
	
}