JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
 <li>list 01</li>
 <li>list 02</li>
 <li>list 03</li>
 <li>list 04</li>
 <li>list 05</li>
</ul>

JavaScript

$(document).ready(function() {
    $('li').click(function() {
      var c = $(this);
      var All = c.prevAll();

      if(All.length > 0) {
        var top = $(All[All.length - 1]);
        var p = $(All[0]);
        var Up = c.prop('offsetTop') - top.prop('offsetTop');
        var Down = (c.offset().top + c.outerHeight()) - (p.offset().top + p.outerHeight());

        c.css('position', 'relative');
        All.css('position', 'relative');
        c.animate({'top': -Up});
        All.animate({'top': Down}, {complete: function() {
          c.parent().prepend(c);
          c.css({'position': 'static', 'top': 0});
          All.css({'position': 'static', 'top': 0}); 
        }});
      }
    });
  });