JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="dropzone"></div>
<span class="add_dropzone">add dropzone</span>
<ul>
<li class="draggable-source"><div style="background-color:red;" id="drag">
<div class="cat_info">
					<span class="box_collapse glyphicon glyphicon-plus"></span>
					<span class="cat_title">add topping</span>
				</div>
<div class="drag_remove"></div>
</div></li>
<li class="draggable-source"><div style="background-color:blue;" id="drag" >Biology</div></li>
</ul>

CSS

.dropzone{border:1px solid #000; min-height:20px; width:100%;padding:10px;}

JavaScript

$(document).on("click", ".add_dropzone", function(e){
    $('<div class=\"dropzone\"></div>').insertAfter($('.dropzone').last());
});

$( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });
    
    $( ".dropzone" ).droppable({
        activeClass: "active",
        hoverClass: "ui-state-active",
		        tolerance: "touch", 
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
	
            var targetElem = $(this).attr("id");

            $( this ).addClass( "ui-state-highlight" );

            if($(ui.draggable).hasClass('draggable-source'))
                $( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');

            
            else
				 
                $( ui.draggable ).appendTo( this );
               
				$('.delete').on('click', function () {
                $(this).parent().parent().parent().parent('li').remove();
            });
            //alert($(this).text());
        }
		
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });