JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trash">
	Trash
	</div>
<div id="list4"></div>

<div id="content">

	<ul id = "items">
		<li class="contentItem"><a href="#" >LearnJava.pdf</a></li>
		<li class="contentItem"><a href="#" >CompSetup.jpeg</a></li>
		<li class="contentItem"><a href="#" >Chrome.exe</a></li>
		<li class="contentItem"><a href="#" >Steam.dll</a></li>
		<li class="contentItem"><a href="#" >Icon.png</a></li>
		
	</ul>

</div>

CSS

#list4
    {
    width:500px;
    height:100px;    
    border:1px solid black;
    }
#trash
    {
    background:yellow;
    cursor:pointer;    
    width:40px;
    }

JavaScript

var mycart = [];
var counter = 0;
    $(".contentItem").draggable({ revert: "invalid", helper: 'clone' });
    $("#list4").droppable({
        drop: function(event, ui) { 
                                  $(this).append($(ui.draggable).clone());
                                  mycart[counter] = ui.draggable; counter++;
                                  }
    });
                                           
$('#trash').click(function(){
for(i=0; i<mycart.length; i++) { $('#list4').children(mycart[i]).remove(); }                                    
});