JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="all-colls-list" class="droptrue">
                <li class="sortedli sort-asc">lala</li>
                <li class="sortedli">lili</li>
                <li class="sortedli">lolo</li>
              </ul>
              <ul id="coll-selected-list" class="droptrue sort-drop">
              </ul>
              <ul id="coll-grouped-list" class="droptrue agg-drop">
              </ul>

CSS

#all-colls-list, #coll-selected-list, #all-colls-group-list, #coll-grouped-list, #all-colls-sort, #all-asc-colls, #all-desc-calls {
    list-style-type: none;
    padding: 0;
    float: left;
    margin: 0px 10px 0px 10px;
    padding: 0px;
    width: 205px;
    min-height: 224px;
}
#all-colls-list, #coll-selected-list, #all-colls-group-list, #coll-grouped-list,  {
    background: #eee;
    background-repeat: no-repeat;
    background-position: 70px 80px;
}
#all-colls-list li, #coll-selected-list li, #all-colls-group-list li, #coll-grouped-list li, #all-colls-sort li, #all-asc-colls li, #all-desc-calls li {
    margin: 1px;
    padding: 3px 5px 3px 10px;
    width: 188px;
    background: #fff;
    color: #9D9D9D;
}

JavaScript

$(function () {
    var lists = [{
        "listid": "#all-colls-list",
        "connectid": "#coll-selected-list, #coll-grouped-list",
        "drop": true
    }, {
        "listid": "#coll-selected-list",
        "connectid": "#all-colls-list",
        "drop": true
    },
    {
        "listid": "#coll-grouped-list",
        "connectid": "#all-colls-list",
        "drop": true
    }];

    $.each(lists, function (i, list) {
        $(list.listid).sortable({
            connectWith: list.connectid,
            dropOnEmpty: list.drop,
            receive: function (event, ui) {
                alert($(this).attr('class'));
                if ($(this).find('li').hasClass("groupAdded") && $(this).find('li').hasClass("selAdded")) {
                    alert("both");
                    //Do nothing
                }
                if ($(this).find('li').hasClass("groupAdded") && !$(this).find('li').hasClass("selAdded")) {
                    alert("group"); //Do nothing
                } 
                if (!$(this).find('li').hasClass("groupAdded") && $(this).find('li').hasClass("selAdded")) {
                    alert("sel"); //Do nothing
                }
                if (!$(this).find('li').hasClass("groupAdded") && !$(this).find('li').hasClass("selAdded")) {
                    alert("none"); //Do nothing
                }
            }
        });
    });
    
    $("#all-colls-list").sortable({
        start: function(event, ui) { 
            $("#coll-selected-list").css("background-image", "url('images/drop_white.png')");
            $("#coll-selected-list").css("background-color", "#eccd70");
            
            $("#coll-grouped-list").css("background-image", "url('images/drop_white.png')");
            $("#coll-grouped-list").css("background-color", "#e2ec70");
        },
        stop: function(event, ui) { 
            $("#coll-selected-list").css("background-image", "url('images/drop_gray.png')");
           ...