JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<div id="lobby">
    <div class="item" data-thieme_id="111"><h5>IDP user 1</h5></div>
    <div class="item" data-thieme_id="222"><h5>IDP user 2</h5></div>
    <div class="item" data-thieme_id="333"><h5>IDP user 3</h5></div>    
</div>
<div class="user-data">
    <h4>REN User data 1</h4>
    <input type="text"/>
</div>
<div class="user-data">
    <h4>REN User data 2</h4>
    <input type="text"/>
</div>
<div class="user-data">
    <h4>REN User data 3</h4>
    <input type="text"/>
</div>

CSS

#lobby { 
    width: 100%; 
    background-color: lightgray;
    border: 2px solid lightgray;
    padding: .2em;
    min-height: 4em;
    margin-bottom: 1em;
}
.item {
    width: 96px;
    padding: .2em;
    margin: .5em;
    text-align: center;
    cursor: move;
    background-color: #999; 
}

.user-data { 
    background-color: lightgray;
    border: 2px dashed lightgray;
    width: 200px;
    padding: 1EM;
    margin-bottom: 1EM;
    
}

.highlight, #lobby.highlight { 
    border: 2px dashed gray; 
}

JavaScript

$(function () {
    // In the lobby are unassigned pupils.
    var $lobby = $("#lobby");
    // The user data ereas
    var $user_data = $(".user-data");

    // All the pupils in the lobby are draggable.
    $(".item", $lobby).draggable({
        revert: "invalid",
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    // User data ereas are droppable.
    $user_data.droppable({
        accept: "#lobby > .item, .user-data > .item",
        activeClass: "highlight",
        drop: function (event, ui) {
            dropItem(ui.draggable, $(this));
        }
    });
    
    // The lobby is droppable.
    $lobby.droppable({
        accept: ".user-data > .item",
        activeClass: "highlight",
        drop: function (event, ui) {
            dropItem(ui.draggable, $(this));
        }
    });

    // Remove item from current zone and add it to the new zone.
    function dropItem($item, $zone) {
        $item.fadeOut('fast', function () {
            $item.appendTo($zone).fadeIn('fast', function() {
                resetDroppable();
            });
        });
    }

    // After each drop action we loop over all user data dropzones.
    //     - Enable or disable droppable.
    //     - Set the thieme_id of the current item to the input 
    //       or empty the input.
    function resetDroppable() {
        $user_data.each(function() {
            if( $( this ).has( ".item" ).length == 0 ) {
                $( this ).droppable( "option", "disabled", false );            
                $( this ).find('input').val('');
            } else {
                $( this ).droppable( "option", "disabled", true );
                var $value = $( this ).find('.item').data('thieme_id');
                $( this ).find('input').val($value);
            }
        });
    }
    
});