JSFiddle - React, Tailwind, and code Playground

HTML

<!-- tables inside this DIV could have draggable content -->
        <div id="drag">
            <!-- right container -->
            <div id="right">
                <table class="right_1">
                    <td class="right_12">
                        <input type="button" value="SeniorA" name="SeniorA" onclick="toggle(this, 'page1')"/>
                        <div id="page1" class="page other">
                        <table>
                            <tr>
                                <td>
                                    <table class='joueur' id ='A'>
                                        <tr><td class='enonce1'>N&ordm;</td><td class='enonce2'>Joueurs</td><td class='enonce3'>Casse Croute</td></tr>
                                        <tr><td class='colum'>1</td><td class='player'><div class='drag ui-draggable'>Spacefrog</div></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><div class="eat">0</div></td></tr>
                                        <tr><td class='colum'>2</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><div class="eat"></div></td></tr>
                                        <tr><td class='colum'>3</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><div class="eat"></div></td></tr>
                                        <tr><td class='colum'>4</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><div class="eat"></div></td></tr>
                                        <tr><td class='colum'>5</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><div class="eat"></div></td></tr>
                                        <tr><td class='colum'>6</td><td class='player'></td><td class='eating'><input type="checkbox" name="eating" value="checkbox"></td><td><div...

CSS

body{
    font-family: arial;
    margin: 0px; /* for IE6 / IE7 */
}




/* drag objects (DIV inside table cells) */
.drag{
    cursor: move;
    margin: auto;
    z-index: 10;
    text-align: center;
    font-size: 10pt; /* needed for cloned object */
    opacity: 0.7;
    filter: alpha(opacity=70);
    /* without width, IE6/7 will not apply filter/opacity to the element ?! */
    /* IE needs element layout */
    width: 150px;
    border: 2px solid #BF6A30;
    /* round corners */
    border-radius: 4px; /* Opera, Chrome */
    -moz-border-radius: 4px; /* FF */
        border-style:solid;
    background-color: purple;
    border-collapse: collapse;
    border-style:solid;
}


/* drag container*/
#drag{
    margin: auto;
    width: 1150px;
    display: table;
    border-collapse: collapse;
    border-style:solid;
    position:absolute;
}
/* container for the left table */
#left_container{
    width: 285px;
    height:825px;
    float: left;
    margin-right: 0;
    /* needed for IE8 to calculate width of left container */
    border-bottom: 1px solid white;
    border-style:solid;
  border-color:purple;
}

div#general_tab{

}

    li#team {
    }
    a{
    font-family: arial;
    font-size: 14px;    
    }
    div#team_tab, div#injured_tab ,  div#add_tab  {    
      height:200px;       
    }
    div#options {
      width: 270px;
      height:40px;
    }
    div#options li{
      background-color : white;
      border-radius: 10px;
    }    
    div#options a{
      color: red;
    }
    div#garbage{
      width: 277px;
      height:40px;
    }
    div#trash{    
      width: 200px;
      height:40px;
      background-color : white;
    }
    div#imgtrash{    
      width: 70px;
      height:40px;
      background:#eee url(img/trash.png) 2.5em center no-repeat
    }
    
    #left {
       width: 260px;
       border-style:solid;
       background-color: blue;
    }
    #left td{
       width: 260px;
       border-style:solid;
     border-color:black;
    }   ...

JavaScript

$('.drag').draggable(
    {
        revert:"invalid",
        helper: 'clone',
        start:function(ui){
          myId =$(this).parent().prev().html();
          myCheck=$(this).parent().parent().find(':checked').length >0 ;  
          myEat= $(this).parent().parent().find('div.eat').html();
          myPage=$(this).parents('[id^="page"]').attr('id');
          $(this).data('myjson',{"Id_drag" : myId,
                                 "Check_drag":myCheck,
                                 "Eat_drag" : myEat,
                                 "Page_drag" : myPage});
          }
   });

$('.player').droppable(
        {
         accept : function(obj){ return obj.hasClass('drag') && $(this).is(':empty')},
         drop: function(event,ui){
                origin=$('#'+(ui.draggable).data('myjson').Page_drag).find('td').filter(function(){ return $(this).html()==$(ui.draggable).data('myjson').Id_drag}).parent();
                                 
                $(this).append( $(ui.helper).clone().css({position:'relative', top:0, left:0}).draggable({
                                                                                                            revert:"invalid",
                                                                                                            helper: 'clone',
                                                                                                            start:function(ui){
                                                                                                                    myId =$(this).parent().prev().html();
                                                                                                                 myCheck=$(this).parent().parent().find(':checked').length >0 ;
                                                                                                                    myEat= $(this).parent().parent().find('div.eat').html();
                                                  ...