JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <table>
        <tr>
            <td id='1'></td>
            <td id='2'></td>
            <td id='3'></td>
        </tr>
        <tr>
            <td id='4'></td>
            <td id='5'></td>
            <td id='6'></td>
        </tr>
        <tr>
            <td id='7'></td>
            <td id='8'></td>
            <td id='9'></td>
        </tr>
    </table>
</body>

CSS

table, td {
    border-collapse: collapse;
    border: 1px solid black;
    height: 35px;
    width: 35px;
    text-align: center;
    background-color: grey;
    color: black;
    overflow: hidden;
    table-layout: fixed;
    white-space: nowrap;
}

JavaScript

//Creates the players, turns, cells, and rules to be manipulated later
var X = 'X';
var O = 'O';
var currentPlayer;
var turnCount = 0;
$(document).ready(function () {
    var c1 = $('#1');
    var c2 = $('#2');
    var c3 = $('#3');
    var c4 = $('#4');
    var c5 = $('#5');
    var c6 = $('#6');
    var c7 = $('#7');
    var c8 = $('#8');
    var c9 = $('#9');
});

/*Set's the current player to X if turnCount is odd
And to O if turnCount is even*/
var setCurrentPlayer = function () {
    if (turnCount % 2 === 0) {
        currentPlayer = O;
    } else {
        currentPlayer = X;
    }
};

//Place's an X or an O when a cell is clicked depending on the current player, and update's the turnCount
$(document).ready(function () {
    $('td').one('click', function () {
        turnCount += 1;
        setCurrentPlayer();
        $(this).text(currentPlayer);
        console.log(turnCount);
    });
});
/*This will be uncommented once I get the bottom code working
var winConditions = [[[c1,c2,c3],[c4,c5,c6],[c7,c8,c9]],[[c1,c4,c7],[c2,c5,c8],[c3,c6,c9]],[[c1,c5,c9],[c3,c5,c7]]];
*/
if(c9.text === 'X') {
    alert("You win!");
}