JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <tr id="row-1">
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    
        <tr id="row-2">
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    
        <tr id="row-3">
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
</table>

CSS

td { border:1px solid black; width:200px; height:75px; padding:5px }
div { width:25px; height:25px; float:left; margin-right:5px }
tr#row-1 div { background-color: red; }
tr#row-2 div { background-color: green; }
tr#row-3 div { background-color: blue; }
.highlight { background-color: #BFFBFF /*best friends forever x2! */ }

JavaScript

$(document).ready(function(){

        $("div").draggable({ revert: 'invalid' });

        $("td").droppable({
            accept: function(draggable) {
                var droppable_row = $(this).parent().attr("id").split("-")[1];
                var draggable_row = draggable.parent().parent().attr("id").split("-")[1];

                return droppable_row == draggable_row;
            },
            activeClass: "highlight"
        });

     });