JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <style type="text/css">
        div.thumbnail img {height: auto; width: 390px;}
        .ui-state-highlight {margin-left:16px;}
        body {background-color: #fff !important;}
        #sortable1 {border: 1px solid black; height:450px; width:400px; margin:20px;}
        #sortable2 {border: 1px solid green; width:450px; margin:20px;}
        #bottom {border: 1px solid red; width:400px; margin:20px;}
        #sortable1 > div, #sortable2 > div, #bottom >div {height:20px; margin:5px;padding:5px;border:1px solid gray;}
        .input-div {display:none};
        .sortable2 { background-color: #cd8;}
        .bottom { background-color: #a18;}
        .temp { background-color: #ef8;}
        .hoverOver {
                background-color: #a18;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
var lastDeletedItem = new Array();

function updateDeleteList() {
    var theChildren = document.getElementById('sortable2').children;
    var theCount = 0;
    lastDeletedItem = new Array();
    var hiddenArray = new Array();
    for(var ff = 0; ff < theChildren.length; ff++) {
        
        if(jQuery(theChildren[ff]).is(":hidden")) {
            console.log("Hidden:" + theChildren[ff].id    );
            hiddenArray.push(jQuery(theChildren[ff]));
        }
    }
    
    for(var zz = 0; zz < theChildren.length; zz++) {
        if(!jQuery(theChildren[zz]).is(":hidden")) {
            if(theChildren[zz].id.substr(0,4) == 'temp') {
    
                    console.log("Not hidden, Temp:" + theChildren[zz].id);
                lastDeletedItem[theChildren[zz].id] = hiddenArray[theCount];
                theCount++;
            }   
        }
    }
        
    for(var key in lastDeletedItem) {
        if (lastDeletedItem.hasOwnProperty(key))
            jQuery('#' +...