JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    
    <li class="to-drag" data-id="1">1</li>
    <li class="to-drag" data-id="2">2</li>
    <li class="to-drag" data-id="3">3</li>
    
</ul>

<ul class="dropzone">
    
    <li class="placeholder 0"></li>
    <li class="placeholder 1"></li>
    <li class="placeholder 2"></li>
    
</ul>


<button class="default">Default travel</button>

CSS

body {
	padding: 0;
}

.wrap {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

ul#draggable, ul#dropzone {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

ul#dropzone {
	height: 100px;
}

ul#draggable li.to-drag {
	background-color: #d1d1d1;
	border: 2px solid #909090;
	cursor: move;
	float: left;
	height: 150px;
	margin-right: 10px;
	text-align: center;
	width: 200;
}

ul#draggable li.to-drag img {
	height: 50px;
	width: 50px;
}

ul#draggable li.new-day {
	background-color: #d1d1d1;
	border: 2px solid #909090;
	cursor: pointer;
	float: left;
	height: 150px;
	margin-right: 10px;
	text-align: center;
	width: 200px;
}

ul#draggable li.new-day:hover {
	background-color: #e5e5e5;
	border: 2px solid #a1a1a1;
}

ul#dropzone li.placeholder {
	border: 2px dashed #c1c1c1;
	cursor: move;
	float: left;
	height: 100px;
	text-align: center;
	width: 100px;
}

ul#dropzone li.placeholder img {
	height: 100px;
	width: 100px;
}

ul#dropzone li.spaceholder {
	float: left;
	height: 100px;
	width: 5px;
}

.correct {
	background-color: #44871f !important;
	border: 2px solid #44871f !important;
}

.error {
	border: 2px dashed #a70000 !important;
}

.active {
	background-color: #efefef;
	border: 1px solid #000000;
}

.to-drop {
	background-color: #fefefe;
	border: 2px solid #44871f;
}

.textarea {
	height: 150px;
	width: 100%;
}

span.remove {
	color: #a70000;
	cursor: pointer;
	display: block;
}

span.remove:hover {
	color: #ff0000;
}

span.suggest {
	color: #55eeee;
	cursor: pointer;
	display: block;
}

span.suggest:hover {
	color: #999eee;
}

JavaScript

$(".default").click(function() {
    $("li.to-drag").each(function(index) {
        var clone = $(this).clone();
        var day = $(this).attr("data-id");
        $("li.placeholder").each(function(){
            $(this).attr("data-id", day);
        });
        clone.hide().appendTo("." + index).fadeIn(1500);
    });
});