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#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('disable');

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

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