JSFiddle - React, Tailwind, and code Playground

by Nathamis

HTML

<div id="run">
    <h1>PADLIST</h1>
    <ul id="listPad1" class="connectedPadList">
    </ul>
    <h1>CWPLIST</h1>
    <h1>Questionnaires</h1>
</div>

<div id="choix">
    <h1>PADLIST</h1>
    <ul id="listPad2" class="connectedPadList">
        <li class="ui-state-default">
            <span class="identifier">CWP1</span>
            <span class="type">operator</span>
            <span class="adress">172.25.79.241</span>
            <span class="username">Participant 1</span>
        </li>
        <li class="ui-state-default">
            <span class="identifier">CWP2</span>
            <span class="type">operator</span>
            <span class="adress">172.25.79.242</span>
            <span class="username">Participant 2</span>
        </li>
        <li class="ui-state-default">
            <span class="identifier">HF 1</span>
            <span class="type">observer</span>
            <span class="adress">10.50.112.32</span>
            <span class="username">Obs1</span>
        </li>
        <li class="ui-state-default">
            <span class="identifier">HF 2</span>
            <span class="type">observer</span>
            <span class="adress">172.25.79.244</span>
            <span class="username">Obs2</span>
        </li>
    </ul>
</div>

CSS

h1{
                font-size: 18px;
            }
            #run{
                float: left;
                width: 350px;
            }

            #choix{
                float: left;
                width: 350px;
                margin-right: 20px;
            }

            #listPad1, #listPad2{
                min-height: 20px;
            }

JavaScript

$(function () {
                $("#listPad1").sortable({
                    connectWith: "#listPad2",
                    receive: function (event, ui) {

                        //on créer un élèment li pour que les inputs aillent dedans
                        var newLi = document.createElement('li');
                        document.getElementById('listPad1').appendChild(newLi);

                        //on parcourt les noeuds du li qu'on vient de deplacer.
                        for (var i in ui.item[0].childNodes) {
                            //on fait une petite verification pour ne pas prendre les noeuds qui correspondent pas
                            if (ui.item[0].childNodes[i].textContent != "" & ui.item[0].childNodes[i].attributes != null) {
                                //alert(ui.item[0].childNodes[i].attributes);
                               //on crée un input et on rempli la valeur et on met le nom de class dans le name
                                var newInput = document.createElement('input');
                                newInput.type = "text";
                                newInput.value = ui.item[0].childNodes[i].textContent;
                                newInput.name = ui.item[0].childNodes[i].getAttribute("class");
                                //document.getElementById('listPad1').appendChild(newInput);
                                newLi.appendChild(newInput);
                            }
                        }
                        ui.item.remove();
                        var length = $('#listPad1 > *').length;

                        
                        
                        //alert('length : '+length);
                        //alert('length dernier li : '+ $(this).children().eq(-2).attr('id'));
                        if($(this).children().eq(-2).attr('id') == length){
                            var lastId = $(this).children().eq(-2).attr('id');
                            var newId =...