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 () {
    var overSortable = false;
    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: false,
            opacity: 0.7,
            dropOnEmpty: false,
            beforeStop: function (e, ui) {
                if (overSortable) {
                    curDrag.addClass('placeholder');
                    var dragging = curDrag.find("img").remove();

                    curThis.append(dragging).addClass("dropped");
                   curThis.droppable('disable');

                    var day = curDrag.attr('data-id');
                    var index = $(curTarget).index();

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

                    // $(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 aria-hidden="true">&times;</span></button><h4...