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
$(document).ready(function () {
    var X = 'X';
    var O = 'O';
    var currentPlayer;
    var turnCount = 0;
    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;
        }
    };
    $('td').on('click', function () {
        turnCount += 1;
        setCurrentPlayer();
        $(this).text(currentPlayer);
        console.log(turnCount);
        if (c9.text() === 'X') {
            alert("You win!");
        }
    });
});

/*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]]];
*/