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>
<div class="test"></div>

CSS

td {
    width:80pt;
}

JavaScript

var lastclicked=null;
var lastclickedcontent=null;
$(document).ready(function(){
    $(".clickme").click(function(event){
        var tilecontent = $($(this).html()).text();
        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).html()).html(lastclickedcontent);
                var newObj = $($(this).html());
                newObj.html(lastclickedcontent);
                newObj.appendTo($('.test'));
                $(lastclicked.html()).empty();
                lastclicked.removeAttr('style');
                $('p').html("Awesome! Your token should have moved!");
            }
        }
    });
});