JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<ul>
    <li id="one">item-1</li>
    <li id="two">item-2</li>
    <li id="three">item-3</li>
    <li id="four">item-4</li>
</ul>

JavaScript

$('ul').on('click', function () {
    $('#two').css({ position : 'absolute', top : $('#two').position().top });
    
    var lastOffset = ($(this).children().last().position().top + $(this).children().last().height());
    
    $('#two').animate({ top : lastOffset }, 1000), function () {
        $(this).appendTo('ul').css({ position : 'relative', top : 0 });
    };
});