JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <div class="wrap">
        
        <ul id="draggable" class="items">
            
            <li class="to-drag">
                <div class="data items" data-id="1"><img src="http://i.cdn.travel.cnn.com/sites/default/files/styles/200x200/public/2011/09/01/best_beaches_NZ.jpg?itok=g9gR8oI3"></div>
                <h1>1</h1>
                <p>first</p>
            </li>
            
            <li class="to-drag">
                <div class="data items" data-id="2"><img src="http://i.cdn.travel.cnn.com/sites/default/files/styles/200x200/public/2011/09/01/best_beaches_NZ.jpg?itok=g9gR8oI3"></div>
                <h1>2</h1>
                <p>second</p>
            </li>
            
            <li class="to-drag">
                <div class="data items" data-id="2"><img src="http://i.cdn.travel.cnn.com/sites/default/files/styles/200x200/public/2011/09/01/best_beaches_NZ.jpg?itok=g9gR8oI3"></div>
                <h1>3</h1>
                <p>third</p>
            </li>
            
            <li class="to-drag">
                <div class="data items" data-id="2"><img src="http://i.cdn.travel.cnn.com/sites/default/files/styles/200x200/public/2011/09/01/best_beaches_NZ.jpg?itok=g9gR8oI3"></div>
                <h1>4</h1>
                <p>fourth</p>
            </li>
            
            <li class="to-drag">
                <div class="data items" data-id="2"><img src="http://i.cdn.travel.cnn.com/sites/default/files/styles/200x200/public/2011/09/01/best_beaches_NZ.jpg?itok=g9gR8oI3"></div>
                <h1>5</h1>
                <p>fifth</p>
            </li>				
            
            <li class="new-day" class="items">
                <h1>+</h1>
                <p>Add another day</p>
            </li>
            
        </ul>
        
        <div style="height: 100px; clear: both;"></div>
        
        <ul id="dropzone">
            
            <li class="placeholder"></li>
            <li class="placeholder"></li>
           ...

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#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;
	margin-right: 10px;
	text-align: center;
	width: 100px;
}

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

.correct {
	background-color: #44871f !important;
	border: 2px solid #44871f !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

$(function() {

	init();

	function init () {

		sorting();
		dragging();
		dropping();

	}

	$("#draggable li.new-day").click(function() {

		$("ul#draggable li.to-drag").last().after('<li class="to-drag ui-draggable ui-draggable-helper" data-id="101" data-order=""><h1>?</h1><p>Suggest day</p></li>');

		init();

	});

	function resize (event, ui) {

		ui.helper.find("img").css({ height: "100%", width: "100%" });
		ui.helper.css({ height: "100px", width: "100px" });

	}

	function sorting () {

		$("#dropzone").sortable({

			connectWith: ".items",
			revert: true,
			opacity: 0.7,
			dropOnEmpty: false

		});

	}

	function dragging () {

		$("#draggable li.to-drag").draggable({

			connectToSortable: ".items",
			helper: "clone",
			revert: false,
			opacity: 0.5,
			cursorAt: { top: 50, left: 50},

			start: function (event, ui) {

				$(ui.helper.find("h1, p")).hide();

			},

			drag: resize

		});

	}

	var arr_id = [];
	var arr_comment = [];

	function dropping () {

		$("li.placeholder").droppable({

			accept: "#draggable li.to-drag",
			hoverClass: "correct",
			activeClass: "active",
			revert: false,
			tolerance: "pointer",

			drop: function (event, ui) {

				var dragging = ui.draggable.clone().find("img").remove();

				$(this).append(dragging).addClass("dropped");
				$(this).droppable('destroy');

				var day = $(ui.draggable).attr('data-id');
				var index = $(event.target).index();

				$(this).attr("data-id", day);
				$(this).attr("date-order", index);
				$(this).addClass("drop-"+ index);

				arr_id.push(day);

				$(this).append('<span class="remove">Del</span><span class="suggest" data-toggle="modal" data-target=".modal-'+ index +'">Suggest</span><br>');
				$('<div class="modal fade modal-'+ index +'" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span...