JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Unpublish list</h1>

<ul id="unpublish-list"></ul>


<h1>Publish list</h1>

<ul id="publish-list"></ul>

CSS

h1 {
    font-weight: bold;
    margin: 30px 0 20px 0;
}

ul {
    background-color: #eee;
    padding: 20px 0;
}

li {
    border-bottom: solid grey 1px;
}

JavaScript

var webappModel = {
    list: [{
        "id": "a94c5bb052b5b5b0089714e8db7204e4",
        "name": "Checklist"},
    {
        "id": "a94c5bb052b5b5b0089714e8db721241",
        "name": "Incidents Blue"},
    {
        "id": "a94c5bb052b5b5b0089714e8db72379b",
        "name": "Incidents White"}],

    find: function(id) {
        for (var i = 0; i < this.list.length; i++) {
            var w = this.list[i];
            if (w.id === id) {
                return w;
            }
        }
        return undefined;
    },

    remove: function(item) {
        for (var i = 0; i < this.list.length; i++) {
            if (this.list[i].id === item.id) {
                this.list.splice(i, 1);
                break;
            }
        }
    }
};

var publishController = {

    unpublishList: $("#unpublish-list"),
    publishList: $("#publish-list"),

    init: function(webappModel) {
        this.webappModel = webappModel;

        this.clearLists();

        // load webApp lists
        for (var i = 0; i < this.webappModel.list.length; i++) {
            this.loadWebAppItem(this.webappModel.list[i]);
        }

        this.initDragDropSortListeners();
    },

    loadWebAppItem: function(item) {
        $(this.getUnPublishItemTemplate(item)).appendTo(this.unpublishList);
    },

    getUnPublishItemTemplate: function(item) {
        return "<li data-id=\"" + item.id + "\">" + "<h3>" + item.name + "</h3>" + "</li>";
    },

    getPublishItemTemplate: function(item) {
        return "<li data-id=\"" + item.id + "\">" + "<span class=\"publish-list-text\">" + "<h3>" + item.name + "</h3>" + "</span>" + "</li>";
    },

    initDragDropSortListeners: function() {
        // draggable
        this.unpublishList.find("li").draggable({
            revert: "invalid",
            helper: "clone"
        });

        this.publishList.sortable();

        var that = this;

        // droppable
        this.unpublishList.droppable({
            drop: function(event, ui) {
       ...