JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td data-points="0"></td>
        <td data-points="0"></td>
        <td data-points="0"></td>
    </tr>
    <tr>
        <td data-points="0"></td>
        <td data-points="0"></td>
        <td data-points="0"></td>
    </tr>
    <tr>
        <td data-points="0"></td>
        <td data-points="0"></td>
        <td data-points="0"></td>
    </tr>
</table>


Circle: <div class="legend circle"></div>
Ex: <div class="legend cross"></div>

CSS

table td{
    border: 1px solid #000;
    width: 30px;
    height: 30px;
}

.circle{
    background-color: red;
}
.cross{
    background-color: green;
}

div.legend{
    width: 30px;
    height: 30px;
}

JavaScript

$(function(){
    var arr =new Array(3)
        for (i=0; i <3; i++)
            arr[i]=new Array(3)
    
    var checkResult = function(){
        $("table tr").each(function(i, val){
            $(this).find('td').each(function(j, val2){
                arr[i][j] = parseInt($(this).attr("data-points"));
            });
        });
        
        for(var i = 0; i<3;i++){
            var rowSum = 0;
            for(var j = 0; j<3;j++){
                rowSum += arr[i][j];
            }
            if(rowSum === 3)
                alert("Circle WIN!");
            else if(rowSum === -3)
                alert("Cross WIN!");
        }
        
        for(var i = 0; i<3;i++){
            var colSum = 0;
            for(var j = 0; j<3;j++){
                colSum += arr[j][i];
            }
            if(colSum === 3)
                alert("Circle WIN!");
            else if(colSum === -3)
                alert("Cross WIN!");
        }
        
        if(arr[0][0] + arr[1][1] + arr[2][2] === 3)
            alert("Circle WIN!");
        else if(arr[0][0] + arr[1][1] + arr[2][2] === -3)
            alert("Cross WIN!");
        
        if(arr[2][0] + arr[1][1] + arr[0][2] === 3)
            alert("Circle WIN!");
        else if(arr[2][0] + arr[1][1] + arr[0][2] === -3)
            alert("Cross WIN!");
    };
    
    //0-circle; 1-ex;
    var turn = 0;
    
    $('td').on('click', function(){
        if($(this).hasClass('filled')){
           alert('field is filled');
        }else{
            if(turn === 0){
                $(this).addClass('circle filled').attr("data-points" ,1);
                turn = 1;
            }else{
                $(this).addClass('cross filled').attr("data-points" ,-1);
                turn = 0;
            }
        }
        checkResult();
    });
});