JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<b>From: </b><select id="from">
    <option value="one">item-1</option>
    <option value="two">item-2</option>
    <option value="three">item-3</option>
    <option value="four">item-4</option>
</select>

<b> To: </b> <select id="to">
    <option value="one">item-1</option>
    <option value="two">item-2</option>
    <option value="three">item-3</option>
    <option value="four">item-4</option>
</select>

<button>Descend</button>

<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>

CSS

ul li { width: 100px; }

.active { border: 1px solid blue; position: absolute; }

JavaScript

var $from = $('#from');
var $to = $('#to');

$('button').click (function () {
   var from = $from.val();
   var to = $to.val();
   
   var $li = $('ul li');
   var $fromEl = $('#' + from);
   var $toEl =  $('#' + to);
   
    //only descending    
   if (from == to || $li.index($fromEl) > $li.index($toEl)) return;
        
   var destX = $toEl.position().top;
   
   $toEl.after('<li id="tmpLi2"></li>');
    
   $('#tmpLi2').animate({height: $fromEl.outerHeight()}, 1000);

     //add a blank li for smooth animation
     $fromEl
         .after('<li id="tmpLi1">&nbsp;</li>')
         .css ('top', $fromEl.position().top)
         .addClass ('active' )
         .animate({
                top: (destX)
             }, 
             1000, 
             function() {
                $toEl.after(this);
                $('#tmpLi2').remove();
                $(this).removeClass('active');
          });
    
    $('#tmpLi1').slideUp(function() { $(this).remove()});
    
});