JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" class="example">
<div id="products" class="products">
<div class="ui-widget-content">
        <ul class="ul1">
            <li data-id="1" class ="fourth" id="fourth"><a href="#" style="color:#FFFFFF;" class="button button-orange"> BLOCK1 </a></li>
    </ul>
    </div>
<table width="30%">
    <tr>
        <td><div id="shoppingCart" class="shoppingCart">
    <h3  align="center" class="ui-widget-header">TABLE</h3>
    <div class="ui-widget-content">
        <ol style="list-style:none" align="center" id="bank">
            <li class="placeholder" >&nbsp;<br/><br/></li>
        </ol>
    </div>
</div>
     </td>
    </tr>
</table>
    </div>
    <div id="list" class="hidden" >

    <input type="text" name="text1" id="text1" />
</div>
<div id="equal" width="100%"><a href="#" class="button button-orange"></a></div>
    <div id="e1"></div>
</div>

<div id="div2" class="example">
    <div id="products" class="products">
<div class="ui-widget-content">
        <ul>
            <li data-id="1" class = "fourth" id="fourth"><a href="#" style="color:#FFFFFF;" class="button button-orange"> BLOCK2 </a></li>
    </ul>
    </div>
<table width="30%">
    <tr>
        <td><div id="shoppingCart1" class="shoppingCart">
    <h3  align="center" class="ui-widget-header">TABLE</h3>
    <div class="ui-widget-content">
        <ol style="list-style:none" align="center" id="bank">
            <li class="placeholder" >&nbsp;<br/><br/></li>
        </ol>
    </div>
</div>         
     </td>
    </tr>
</table>
</div>
      <div id="list" class="hidden" >

    <input type="text" name="text1" id="text1" />
</div>
<div id="equal" width="100%"><a href="#" class="button button-green"></a></div>
    <div id="e1"></div>
</div>

CSS

#products{font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;}
.ui-widget-content ul li
{
	float: left;
	line-height: 30px;
	list-style:none;
	margin: 0 0px;
    text-decoration:blink;
}
.ui-widget-content
{
   min-height:40px;
    
}
.hidden{
    visibility:hidden;
}
#equal
{display:none;
}
#e1
{display:none;
}

.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 19px;
  color:#FFFFFF;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
     color:#FFFFFF;
  pointer-events: none;
  background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
  background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: radial-gradient(farthest-corner,...

JavaScript

$(".products li").draggable({
    appendTo: "body",
    helper: "clone"
  
});
$(".shoppingCart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass:"ui-state-hover",
    accept:'.fourth',
    drop: function(event, ui) {
        test.call(this,event, ui);
     
    }
}).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
});
function test(event, ui)
{
      var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid
        }).appendTo(this);
             $("#equal").hide();
        
       
        
}