JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="blocoSite">
    <li data-date="2010-05-12">2010
    </li>
    <li data-date="2012-05-12">2012
    </li>
    <li data-date="2015-05-12">2015
    </li>
    <li data-date="2008-05-12">2008
    </li>
    <li data-date="2009-05-12">2009
    </li>
    <li data-date="2010-05-12">2010
    </li>
</ul>
<input type=button id="ordeData" onclick="orderDate('acrescente')" value="CLICK"/>

<ul id=ordered>
    
</ul>

CSS

li { position: absolute; }

JavaScript

$(function(){
    var tllp = 15;
    $('#blocoSite li').each(function(i, lep){
        $(lep).css({ top : tllp });
        tllp += 15;
    });
});

function orderDate(tipo){
    $('#ordered').remove();
    var nposX = 0;
    var nposY = 0;

    if(tipo == 'acrescente'){
        $("#ordeData").attr({'onclick' : 'orderDate("decrescente");'});
    }else if(tipo == 'decrescente'){
        $("#ordeData").attr({'onclick' : 'orderDate("acrescente");'});
    }


    function lxp(a, b){
        var adate = new Date($(a).attr("data-date"));
        var bdate = new Date($(b).attr("data-date"));
        if(tipo == 'acrescente'){
            return adate > bdate ? -1 : 1;
        }else if(tipo == 'decrescente'){
            return adate < bdate ? -1 : 1;
        }
    }
    var order="";
    $("#blocoSite li").sort(lxp).each(function(i, el){
        order += el.outerHTML+"\n";
        $("#blocoSite li").each(function(is, els){
            nposX = $(els).offset().left;
            nposY = $(els).offset().top;

            if(i == is){
                return false;
            }
        });

        $(this).animate({
            left: 200,
            top :  nposY
        }, 800);
    });
    $('#ordered').html(order);
}