jQuery Перезапись анимированного списка?

Question

У меня следующий jQuery код для списка повторного заказа:

$("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);

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 анимации, поэтому буду благодарен за помощь.