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>
<p> Drag two images in the targeted area. See when a new image is dragged, The previous image also remains in the targeted area.I want to remove the previous image and show only the new image in the targeted area. So THERE SHOWS ONLY ONE IMAGE AT A TIME</p>
		<div class="draggable">
			<img src="http://www.edgesportscenter.com/images/fort-collins-soccer-league-at-edge-sports.png" alt="">
                <img src="http://www.clipartlord.com/wp-content/uploads/2013/08/tennis-ball2.png" alt="">
		</div>
            
		<div id="droppable">
            drop
		</div>

CSS

div#droppable {
		width: 40px;
		height: 40px;
		background: red;
		color: #fff;
        
	}

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

JavaScript

$(function() {
    var makeDraggable = function(element) {
        element.draggable({ 
	    	revert: "invalid",
	    	appendTo: "#droppable",
	    	helper: "clone" 
	    });
    }
    $( "#droppable" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            var newClone = $(ui.helper).clone();
            makeDraggable(newClone);
            $(this).empty().append(newClone);
        }
	});
    // Initalise the program by making first draggable:
	makeDraggable($(".draggable img"));
});