JSFiddle - React, Tailwind, and code Playground

by hirenwebdp

HTML

<div id="products">
    <h1 class="ui-widget-header"class="ui-widget-header"/>Blocks</h1>
    <div class="ui-widget-content">
         <ul>
            <li data-id="1" class = "assets1"><a href="#" style="color:#FFFFFF;" class="button button-orange">Bank </a> </li>
            <li data-id="2"class = "assets2"><a href="#" style="color:#FFFFFF;" class="button button-green">21650</a></li>
             
             <li data-id="4" class = "assets4"><a href="#" style="color:#FFFFFF;" class="button button-green">computer</a>  </li>
<li data-id="5" class = "assets5"><a href="#" style="color:#FFFFFF;" class="button button-orange">1500 </a> </li>               
             <li data-id="7" class = "assets8"><a href="#" style="color:#FFFFFF;" class="button button-green">oven</a>  </li>
			 <li data-id="8" class = "assets9"><a href="#" style="color:#FFFFFF;" class="button button-orange">2000</a>  </li>
                          <li data-id="9" class = "assets14"><a href="#" style="color:#FFFFFF;" class="button button-orange">iPhone</a> </li>
             
             <li data-id="10" class = "assets13"><a href="#" style="color:#FFFFFF;" class="button button-green">500</a> </li>
             
                   <li data-id="11" class = "assets15"><a href="#" style="color:#FFFFFF;" class="button button-green">2600</a> </li>
             
             
 <li data-id="12" class = "assets3"><a href="#" style="color:#FFFFFF;" class="button button-orange">15000</a> </li>	               
              <li data-id="13"class = "assets6"><a href="#" style="color:#FFFFFF;" class="button button-green">Minus: Drawings</a></li>
             
                             <li data-id="14" class = "assets7"><a href="#" style="color:#FFFFFF;" class="button button-orange">1000</a> </li>
             
             <li data-id="15" class = "assets12"><a href="#" style="color:#FFFFFF;" class="button button-green">Plus:Net Profit</a> </li>
			  <li data-id="16" class = "assets11"><a href="#"...

CSS

#products{font: 13px/23px '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: 10px;
	list-style:none;
	margin: 0 02px;
    text-decoration:blink;
    min-height:40px;
}


.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 10px;
  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, rgba(255,...

JavaScript

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});

$("#shoppingCart1 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
     containment: "document",
        revert: true,
        accept:".assets1",
    drop: function(event, ui) {
        var self = $(this);
                     contents = $(this).attr('#shoppingCart1 ol li');
        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);
        $("#list").append(ui.draggable.text());
        
               // To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
    }
}).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
    
});    



$("#shoppingCart2 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
     containment: "document",
        revert: true,
        accept:".assets2",
    drop: function(event, ui) {
        var self = $(this);
                     contents = $(this).attr('#shoppingCart2 ol li');
        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);
        $("#list").append(ui.draggable.text());
           
//place1 sum
         var sum1 = 0;
        var pattern="";
        var matches="";
        $('#place2').find('li').each(function(index)
                     {var pattern = /[0-9]+/g;
                      var matches =...