JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">
<ul>
<li class="list" id="1">Teacher1</li>
<li class="list" id="2">Teacher2</li>
<li class="list" id="3">Teacher3</li>
<li class="list" id="4">Teacher4</li>
</ul>
</div>
<div class="drop">
<table class="tble">
<tr>
    <td id="td1" class="drop1 br">Vocational<br /></td>
    <td id="td2" class="drop2 br">English<br /></td>
    <td id="td3" class="drop3 br">Mathematics<br /></td>
    <td id="td4" class="drop4 br">French<br /></td>
</tr>
<tr>
    <td id="td5" class="drop5 br">Hindi<br /></td>
    <td id="td6" class="drop6 br">Science<br /></td>
    <td id="td7" class="drop7 br">PTE<br /></td>
    <td id="td8" class="drop8 br">Social Science<br /></td>
</tr>
</table>
</div>

CSS

.draggable {
  width:400px;
  height:auto;
  border:solid 1px #ccc;
}
.dropareahover {
  background-color:#EFD2A4;
  border-color:#DFA853;
}
.drop-active {
 background: #ffff99;
}

.draggable ul {
margin:0px;
padding:0px;
}
.draggable ul li {
list-style-type:none;
}
.drop {
width:400px;
height:auto;
margin:10px 0px 0px 0px;
border:solid 1px #ccc;
}
.drop1,.drop2,.drop3,.drop4,.drop5,.drop6,.drop7,.drop8 {
border:solid 1px #CCCCCC;
width:100px;
}
.drop ul {
margin:0px;
padding:0px;
}
.drop ul li {
list-style-type:none;
}
.tble{border-collapse:collapse;}
.tble td{text-align:center;}

JavaScript

function drop(selector, a) {
   $(selector).droppable({
      accept: a,
      activeClass: 'drop-active',
      hoverClass: 'dropareahover',
      drop: function(event, ui) {
        var targetId = $(this).attr("id");
        $("#" + targetId).each(function() {             
            $(this).append(ui.draggable.text());
        });        
      }
    });    
}

$(document).ready(function() {            
    $(".list").draggable({
    helper: 'clone', 
    cursor: 'hand', 
    revert: true,
    drag: function(ev, ui) {    
        dragId = $(this).attr('id');
     }     
    });    

    drop("#td1", '#1');
    drop("#td2", '#1');
    drop("#td3", '#2');
    drop("#td4", '#2');
    drop("#td5", '#3');
    drop("#td6", '#3');
    drop("#td7", '#4');
    drop("#td8", '#4');
 });