JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<h4>This is a draggable image page</h4>
		<div class="draggable">
			<img src="http://www.edgesportscenter.com/images/fort-collins-soccer-league-at-edge-sports.png" alt="">
		</div>
		
		<div id="droppable">
			
				<li class="placeholder">Image drops for only one time but i want to clone image as many times as possible</li>
			
		</div>

CSS

div#droppable {
		width: 250px;
		height: 200px;
		background: #eee;
		float: right;
        margin-top:-100px;
	}

	.draggable img {
		width: 40px;
		height: 40px;
	}
	.ui-draggable-dragging {
		width: 40px;
		height: 40px;
	}

JavaScript

$(function() {
	    $( ".draggable img").draggable({ 
	    	revert: "invalid",
	    	appendTo: "#droppable",
	    	helper: "clone" 
	    });
	    $( "#droppable" ).droppable({
	    	activeClass: "ui-state-default",
      		hoverClass: "ui-state-hover",
	     
	      drop: function( event, ui ) {
	        $( this ).find( ".placeholder" ).remove();
	        var image = $(".ui-draggable");
	         $( "<img />" ).image.src.appendTo( this );
	      }
	    });
	  });