JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<img src='http://pcpress.rs/wp-content/uploads/2013/02/manila-folder.jpg' class='dropTarget' title='Switch Tables'/><br /><br />

<div class='main'>
<label>Home Table</label>
<table class='basic'>
    <thead> 
        <tr>
            <th>Case</th>
            <th>Creator</th>
            <th>Modifier</th>
        </tr>  
    </thead>
    <tbody>    
        <tr id='homeRow1'>
            <td><span class='drag' id='homeRow1'><strong>&uArr;</strong></span>&nbsp;0012325</td>
            <td>Jane Doe</td>
            <td>John Williams</td>
        </tr>   
        <tr  id='homeRow2'>
            <td><span class='drag' id='homeRow2'><strong>&uArr;</strong></span>&nbsp;0034525</td>
            <td>Jane Doe</td>
            <td>John Williams</td>
        </tr>
        <tr id='homeRow3'>
            <td><span class='drag' id='homeRow3'><strong>&uArr;</strong></span>&nbsp;9882325</td>
            <td>Jane Doe</td>
            <td>John Williams</td>
        </tr>
    </tbody>
</table>   
</div>

<div class='fav1'>
<label>Favorite Table</label>
<table class='fav1table basic'>
    <thead> 
        <tr>
            <th>Case</th>
            <th>Creator</th>
            <th>Modifier</th>
        </tr>  
    </thead>
    <tbody>    
        <tr>
            <td><span class='drag'><strong>&uArr;</strong></span>&nbsp;768900</td>
            <td>James Peters</td>
            <td>Joe Davis</td>
        </tr>   
        <tr>
            <td><span class='drag'><strong>&uArr;</strong></span>&nbsp;768900</td>
            <td>James Peters</td>
            <td>Joe Davis</td>
        </tr> 
        <tr>
           ...

CSS

.dropTarget{width: 80px; height: auto;}
.ui-state-highlight{background-color: #000}

.basic{text-align:left; width:100%}

.fav1{display:none;}

JavaScript

$.fn.dataTableExt.oApi.fnAddTr = function ( oSettings, nTr, bRedraw ) {
    if ( typeof bRedraw == 'undefined' )
    {
        bRedraw = true;
    }
 
    var nTds = nTr.getElementsByTagName('td');
    if ( nTds.length != oSettings.aoColumns.length )
    {
        alert( 'Warning: not adding new TR - columns and TD elements must match' );
        return;
    }
 
    var aData = [];
    var aInvisible = [];
    for ( var i=0 ; i<nTds.length ; i++ )
    {
        aData.push( nTds[i].innerHTML );
        if (!oSettings.aoColumns[i].bVisible)
        {
            aInvisible.push( i );
        }
    }
 
    /* Add the data and then replace DataTable's generated TR with ours */
    var iIndex = this.oApi._fnAddData( oSettings, aData );
    nTr._DT_RowIndex = iIndex;
    oSettings.aoData[ iIndex ].nTr = nTr;
 
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
 
    // Hidding invisible columns
    for ( var i = (aInvisible.length - 1) ; i >= 0 ; i-- )
    {
        oSettings.aoData[iIndex]._anHidden[ i ] = nTds[aInvisible[i]];
        nTr.removeChild( nTds[aInvisible[i]] );
    }
 
    // Redraw
    if ( bRedraw )
    {
        this.oApi._fnReDraw( oSettings );
    }
};



$('.basic').dataTable({
    //"bPaginate": false,
    //"bInfo": false,
    "bFilter": false,
    "iDisplayLength": 2
    });

$( ".drag" ).draggable({ revert: "invalid"});
  
			  $( ".dropTarget" ).droppable({
				drop: function( event, ui ) {
				  // fade out dropped icon		
				//  ui.draggable.hide();
				  var dropped = parseInt($(this).attr('title')) + 1;
				  $( this )
				  .attr('title',dropped+' entries'); 
				  
				  var delay =  $(this);
					  delay.prop('disabled', true).addClass('ui-state-highlight')
					  setTimeout(function() {
						  delay.prop('disabled', false).removeClass('ui-state-highlight');
					  }, 2000)
                      ui.draggable.css({"top":"0px","left":"0px"});
					  var rowId = ui.draggable.parents("tr");
                      var cloned =...