JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td id="one" class="thing chesseven ui-droppable">
            <img id="blackPawn" class="piece ui-draggable" src="http://www.chessmangler.com/images/chessPieces/Chess.Merida/bp.png" />
        </td>
        <td id="two" class="thing chessodd ui-droppable">
            <img  id="whitePawn" class="piece ui-draggable" src="http://www.chessmangler.com/images/chessPieces/Chess.Merida/wp.png" />            
        </td>
        <td id="three" class="thing chesseven ui-droppable"></td>
        <td id="four" class="thing chessodd ui-droppable"></td>
        <td id="five" class="thing chesseven ui-droppable"></td>
    </tr>
</table>

CSS

.chessodd 
{
    background-color: #999999;
    width: 70px;
    height: 70px;
    padding: 0;
    text-align: center;
}
    
.chesseven {
    
    background-color: #CCC;
    width: 70px;
    height: 70px;
    padding: 0;
    text-align: center;
}

JavaScript

//Success means that you pick up one pawn, and hover it over the other. an alert will pop up telling you the ID of the pawn being hovered OVER.

var _thisSpot;
var Spot = ({
    AddSpotEvents: function(dropSelector) {

        $(dropSelector).droppable({
            over: function() { //<!----------Comment me out to make things work!
                //alert('spot over');   // THIS code works fine, its the over event at the bottom of this code page that needs to work..          
            }, //  <-----------------Comment me out to make things work!
            drop: function(event, ui) {
               
                var $spot = $(this);
                var draggedPiece = ui.draggable.get(0);
                var thisID = "#" + draggedPiece.id;
                var thisSRC = draggedPiece.src;
                
                //alert('dragged: ' + thisID + ' spot: ' + $spot.attr('id')); 

                ui.draggable.remove(); //Got what we need, now delete previous img.
                _newPiece.CreatePieceIMG(thisID, thisSRC, $spot);

                board.AddDragAndDrop('#' + _draggedPieceID, thisID);
            }
        });
    }
});

var _thisPiece;
var Piece = ({
    CreatePieceIMG: function(pieceID, src, spot) {
        spot.append(this.PieceIMG_HTML(pieceID, src));
    },
    PieceIMG_HTML: function(pieceID, src) {
        return '<img id="' + pieceID.substring(1) + '" class="thing piece ui-widget-content ui-draggable" src="' + src + '" />';
    },
    AddPieceEvents: function(dragSelector) {

        $(dragSelector).draggable({
            drag: function(event, ui) {

                var helper = ui.helper;
                var helperID = helper.attr('id'); //data
                _draggedPieceID = helperID; //cheat.  this data needs to be stored elsewhere
            
            }
        }).droppable({
            over: function() {
                alert($(this).attr('id'));
            }
        });
    }
});

var _thisBoard;
var BoardTwoD = ({
   ...