JSFiddle - React, Tailwind, and code Playground

HTML

<div class="board">
</div>

JavaScript

var computerMove = function(square) {

    // Take middle
    if (square.id != 'square4') {
        var context = square4.getContext("2d");
        context.font = "normal 100px Georgia";
        context.fillStyle = "#000"
        context.fillText("O", 15, 85)
    }
}

window.squareClick = function(squareNumber) {

    theSquare = "square" + squareNumber;
    square = document.getElementById(theSquare);

    var context = square.getContext("2d");
    if (context == true) {
        console.log('Square is filled.')
    } else {
        context.font = "normal 100px Georgia";
        context.fillStyle = "#000";
        context.fillText("X", 15, 85);
    }

    computerMove(square);
};

$(document).ready(function() {
    var idex = -1;
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            idex += 1;
            $(".board").append('<canvas id="square' + [idex] + '"  width="100" height="100" style="border:1px solid #000" onclick="squareClick(' + [idex] + ')"></canvas> ');
        }
        $(".board").append('<br>');
    }
});