JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
 

<div class="box">

</div>
<div class="bgcolor">

    <img src="http://www.ogim.4u2ges.com/textit/gloss-icon-green.png" id="b1"/>
</div>

CSS

.txt { width: 100%; height: 100%; }
.border{
   width:150px;
   height:150px;
   position:absolute;
   
    padding: 5px 10px 50px 4px;
    background-color: #B8C3EE;
   
	border-radius:5px;
}
.close{
	
	cursor:pointer;	
	
	
}
.box{width:980px;height:500px;border:1px solid #000;margin:0 auto;}
.bgcolor{
	width:980px;
	margin:0 auto;
	}

JavaScript

var count=0;
var objArr = new Array();

$(function() {			 
				 	
		count++;
		var id=count;
		var cross="remove"+count;
    $( "#b1" ).draggable({ revert: true });
    

    $( "#b1" ).draggable({
      start: function(event, ui) {
           
      },

      stop: function(event, ui) {

            $(".box").append('<div id="box'+objArr.length+'" class="border" onclick="$(this).resizable();$(this).draggable();"><img src="close.png" alt="close" width="20" height="20" class="close" id=box"'+objArr.length+'" onclick="$(this).parent().hide();">  <textarea rows="2" class="txt" id="TextBox'+objArr.length+'" cols="2"></textarea></div>');



      }
    });
    
     $(".box").droppable({
    accept: "#b1",
    drop: dropped,
    scope: "drop",

})

function dropped(event, ui) {


        $(this).append(ui.draggable);
        $(ui.draggable).css({ "left": "0", "top": "0" });
    }


 });