JSFiddle - React, Tailwind, and code Playground

HTML

<div id="products">
	<h1 id="ui-widget-header" class="ui-widget-header"><p align="center" style="font-size:20px;"></p> </h1>
	<div class="ui-widget-content">
        <ul>
            <li data-id="1" class="credit1" id="third"><a href="#" style="color:#FFFFFF;" class="button button-orange"> opening balance </a></li>
            <li data-id="2" class="credit2" id="fourth" > <a href="#" style="color:#FFFFFF;" class="button button-green">Accumulated Depreciation</a> </li>
            <li data-id="5" class = "credit3" id="credit3"><a href="#" style="color:#FFFFFF;" class="button button-orange"> 0</a> </li>
            <li data-id="6" class="credit4"> <a href="#" style="color:#FFFFFF;" class="button button-green">400 </a></li>
            <li data-id="7" id = "credit4" class="sel1"> <a href="#" style="color:#FFFFFF;" class="button button-green">Depreciation </a></li>
            <li data-id="7" id = "credit5" class="sel1"> <a href="#" style="color:#FFFFFF;" class="button button-green">Bank </a></li>
            <li data-id="7" id = "credit6" class="sel1"> <a href="#" style="color:#FFFFFF;" class="button button-green">car </a></li>
        </ul>
		<table width="100%" id="table1">
			<tr> <td width="25%">
					<div id="shoppingCart1" class="shoppingCart">
						<h3 class="ui-widget-header" align="center">detail</h3>
						<div class="ui-widget-content">
						<ol style="list-style:none" align="center" class="bank1">
                            <li class="placeholder" >&nbsp;<br/><br/></li>
						</ol>
						</div>
					</div>
				</td>
				<td width="25%">
					<div  id="shoppingCart3" class="shoppingCart">
						<h3 class="ui-widget-header" align="center">debit</h3>
						<div align="center" class="ui-widget-content">
						<ol id="amt1" style="list-style:none" class="bank3">
                            <li class="placeholder" >&nbsp;<br/><br/></li>
						</ol>
						</div>
					</div>
				</td>
				<td width="25%">
					<div>
						<h3 class="ui-widget-header"...

CSS

#products{font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #f2f8fc;}
li.ui-draggable-dragging{
   list-style:none;
}
.ui-widget-content ul li
{
    display: block;
	float: left;
	line-height: 30px;
	list-style:none;
	margin: 0 0px;
    text-decoration:blink;
}
.ui-widget-content
{
   min-height:90px;   
}
.hidden{
    visibility:hidden;
}
#equal
{display:none;
}
#e1
{display:none;
}
.button-purple {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #8040be #8040be #733aab;
  background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #733aab #8040be #8040be;
}
.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 20px;
  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:...

JavaScript

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});
attachPostToBank(1);
attachPostToBank(2);
attachPostToBank(3);
attachPostToBank(4);
attachPostToBank(5);
attachPostToBank(6);
attachPostToBank(7);
attachPostToBank(8);
attachPostToBank(9);
attachPostToBank(10);
selectanother(1);
selectanother(2);
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();
        
        // To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
          
           
           var isAllFilled = checkCompletionStatus(getParent(this));
        if(isAllFilled)
        {
           var result=getParent(this)+"_result";
            $("."+result).show();
             $("."+result+" a").html("PERFECT");
        }
}
function attachPostToBank(i){
    var bankable = "bank"+i;
    console.log("#"+bankable);
    $("."+bankable).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept : ".credit"+i,
        drop: function(event, ui) {
             test.call(this,event, ui);
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $(this).removeClass("ui-state-default");
        }
    });
}

function getParent(draggedElem)
{
	var tableId=$(draggedElem).parents("table").attr("id");
    //alert(tableId);
	console.log(tableId);
	return tableId;
}
function checkCompletionStatus(tableId){
	
	  var isAllFilled = true;
      $("#"+tableId+" .shoppingCart").each(function(){
            if($(this).find('ol .placeholder').length > 0)
 ...