JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<p>Click on 'x'</p>
<table border="1">
    <tr>
        <td class="clickme"><span>x</span>

        </td>
        <td class="clickme"><span></span>

        </td>
    </tr>
</table>

CSS

td {
    width:80pt;
}

JavaScript

var lastclicked = null;
var lastclickedcontent = null;
$(document).ready(function () {
    $(".clickme").click(function (event) {
        var tilecontent = $(this).children('span')[0].innerHTML;
        if (tilecontent.length > 0) {
            $(this).css('background', 'lightgreen');
            lastclicked = $(this);
            lastclickedcontent = tilecontent;
            $('p').html("GREAT! now click on the empty cell!");
        } else {
            if (lastclicked !== null) {
                $(this).children('span')[0].innerHTML = lastclickedcontent;
                //$($(this).html()).html(lastclickedcontent);
                $(lastclicked).children('span')[0].innerHTML = '';
                lastclicked.removeAttr('style');
                $('p').html("Awesome! Your token should have moved!");
            }
        }
    });
});