JSFiddle - React, Tailwind, and code Playground

HTML

<button class="startNewGame">Начать новую игру</button>
<div class="winner-message"></div>
<div class="field">
    <div class="row">
        <div class="cell x"></div><div class="cell o"></div><div class="cell x"></div>
    </div>
    <div class="row">
        <div class="cell o"></div><div class="cell x"></div><div class="cell o"></div>
    </div>
    <div class="row">
        <div class="cell x"></div><div class="cell o"></div><div class="cell x"></div>
    </div>
</div>

CSS

div {
    box-sizing: border-box;
}

.field {
    margin: 10px;
    border: solid blue 5px;
    width: 310px;
    border-radius: 10px;
}

.cell.x:after {
    content: '✕';
    color: green;
    font-size: 40px;
    position: absolute;
    width: 94px;
    height: 94px;
    line-height: 94px;
    text-align: center;
}

.cell.o:after {
    font-weight: bold;
    color: red;
    content: '◯';
    font-size: 74px;
    position: absolute;
    width: 94px;
    height: 94px;
    line-height: 94px;
    text-align: center;
}

.row {
    height: 100px;
}
.cell {
    display: inline-block;
    border: solid gray 2px;
    width: 100px;
    height: 100px;
}

.winner-message {
    font-size: 50px;
    font-weight: bold;
}

JavaScript

var button = document.querySelector('.startNewGame');
var cells = document.querySelectorAll('.cell');
button.addEventListener('click', function startNewGame() {
		for(var i = 0; i < cells.length; i++) {
			cells[i].classList.remove('x');
			cells[i].classList.remove('o');
		}
		
	});
	
var click = "9";

cells[0].addEventListener('click', function() {
	for(var i = 0; i < cells.length; i++){
  		for(var j = 1; j < click; j++){
				if(j[0] == 1 ){
					cells.classList.add("x")
				}
		}
  
	}
});