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...

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;
	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;
}

.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

$(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="" data-content=""><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();

				$("li.placeholder").removeClass("error");

			},

			drag: resize

		});

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

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

			start: function (event, ui) {

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

			}

		});

	}

	function dropping () {

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

			accept: "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('disable');

				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);
				$(this).attr("data-content", "");

				// $(this).append('<span class="remove">Del</span><span class="suggest" data-toggle="modal" data-target=".modal-'+ index +'">Suggest</span><br>');
				//...