JSFiddle - React, Tailwind, and code Playground
HTML
<div id="top">
<div class="top-icon">YELLOW</div>
</div>
<div id="content"> </div>
CSS
#top, #content {width:500px; height:100px; border:solid 1px #cccccc; padding-left:20px; font-family:Arial, Verdana; font-size:12px;}
#top {height:50px;}
#content {height:400px; margin-top:20px; background:#eeeeee;}
.top-icon {background:yellow; width:100px; height:20px; font-weight:bold; text-align:center; cursor:move; line-height:20px; border:solid 1px #cccccc; margin-top:10px;}
.color-box {margin-top:20px;}
.add-item {background:#fff7d5; width:100px; height:20px; margin-top:5px; border:solid 1px #cccccc; line-height:20px;text-align:center; cursor:pointer;}
JavaScript
$(function() {
$('#content').sortable({
placeholder: 'ui-state-highlight'
});
$(".top-icon").draggable({
connectToSortable: '#content',
helper: myHelper,
stop: handleDragStop
});
function myHelper(event) {
return $(this).clone();
}
var i = 1;
function handleDragStop(event, ui) {
var current_text = '<div class="color-box"><b>Yellow Box ' + i + '</b>'
+ '<div class="yellow-content">'
+ '<div class="item">Item 1</div>'
+ '<div class="item">Item 2</div>'
+ '<div class="item">Item 3</div>'
+ '<div class="add-item">Add New Item</div>'
+ '</div>'
+ '</div>';
$('#content .top-icon').after(current_text);
i++;
var $new_insert_item = $('#content .top-icon').next();
$('#content .top-icon').remove(); // remove the clone .top-icon inside #content
console.log('hi');
// when click on Add New Item button
$('.color-box').on('click', '.add-item', function() {
var $this = $(this);
var item_count = $this.siblings('.item').length + 1;
console.log (item_count);
var str_item = '';
str_item = '<div class="item">Item ' + item_count + '</div>';
$(str_item).insertBefore($this);
});
}
// end of handleDragStop
});