JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="triqui">
    <div class="cajas"></div>
    <div class="cajas"></div>
    <div class="cajas"></div>
    <div class="cajas"></div>
    <div class="cajas"></div>
    <div class="cajas"></div>
    <div class="cajas"></div>
    <div class="cajas"></div>
    <div class="cajas"></div>
</div>

CSS

.triqui{
    width:200px;
}
.cajas{
    width:50px;
    height:50px;
    border:2px solid #000;
    cursor:pointer;
    text-align:center;
    margin:2px;
    float:left;
    line-height:50px;
}

JavaScript

var click = false;
var ganador = [7, 56, 448, 73, 146, 292, 273, 84];
var jugador1 = [];
var jugador2 = [];
var cantidad = $('.cajas');

$(function(){    
    $('.cajas').click(function(){
        posicion($(this));
        if($(this).text() == '' && click == false){
            $(this).html('X');
            click = true;
        }else if($(this).text() == '' && click == true){
            $(this).html('0');
            click = false;
        }
    });
    
    function posicion(e){
        var posicion = $(e).index() + 1,
            resultado = null;
        for(var i = cantidad.lenght; i >= posicion; i--){
            resultado = posicion++;
        }
       return
         resultado
    }
})