JSFiddle - React, Tailwind, and code Playground

by EDWIN MAURICIO QUISHPE MALDONADO

HTML

<form>
    <div class="sortable">
        <fieldset><span class="sort-handle">X</span> <span>1</span></fieldset>
        <fieldset><span class="sort-handle">X</span> <span>2</span></fieldset>
    </div>
    <button type="button">Add Row</button>
</form>
<script src="https://raw.github.com/farhadi/html5sortable/master/jquery.sortable.js"></script>

CSS

fieldset {
    display: block;
    width: 100px;
    border: 1px solid black;
    margin: 10px;
}
.sortable-dragging {
    background-color: yellow;
}
.sortable-placeholder {
    display: block;
    width: 100px;
    border: 1px dashed gray;
    margin: 10px;
    height: 10px;
}

JavaScript

var make_sortable = function(){
    $('.sortable').sortable({
        handle: '.sort-handle'
    });
};
make_sortable();

$('button').click(function(){
    $('.sortable').sortable('destroy');
    
    var $lastrow = $('.sortable').find('fieldset').first().clone();
    var rows = $('.sortable').find('fieldset').length + 1;
    $lastrow.find('span').last().html(rows);
    $('.sortable').append($lastrow);
    
    make_sortable();
});