JSFiddle - React, Tailwind, and code Playground

HTML

<br /><br /><br />
        <ul>
            <li id="1">I am list item number 1.</li><li id="2">I am list item number 2.</li><li id="3">I am list item number 3.</li><li id="4">I am list item number 4.</li><li id="5">I am list item number 5.</li><li id="6">I am list item number 6.</li><li id="7">I am list item number 7.</li><li id="8">I am list item number 8.</li><li id="9">I am list item number 9.</li><li id="10">I am list item number 10.</li>        </ul>

CSS

body {
    font-size: 14px;
    font-family: sans-serif;
}

li, ul {
    position: relative;
    top: 0;
    left: 0;   
}

JavaScript

$("li").live("click", function() {
    var $myLi = $(this);
    var listHeight = $("ul").innerHeight();
    var elemHeight = $myLi.height();
    var elemTop = $myLi.position().top;
    var moveUp = listHeight - (listHeight - elemTop);
    var moveDown = elemHeight;
    var liId = $myLi.attr("id");
    var enough = false;
    var liHtml = $myLi.outerHTML();
    
    $("li").each(function() {
        if ($(this).attr("id") == liId) {
            return false;
        }
        $(this).animate({"top": '+=' + moveDown}, 1000);
    });
    
    $myLi.animate({"top": '-=' + moveUp}, 1000, function() {
        $myLi.remove();
        var oldHtml = $("ul").html();
        $("ul").html(liHtml + oldHtml);
        $("li").attr("style", "");
    });
});

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  }
})(jQuery);