JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding-top: 20px;">
<input class="btn" type="button" value="Oldest First" id="sortAsc"/>
<input class="btn" type="button" value="Newest First" id="sortDesc"/>
</div>

<div id="wrapper" style="padding-top: 20px">
        <ul>
        <li class='item'><div class='activity_date'>01/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Allocated request</div>
        </div></li><li class='item'><div class='activity_date'>03/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Failed request</div>
        </div></li><li class='item'><div class='activity_date'>08/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Pending request</div>
        </div></li><li class='item'><div class='activity_date'>13/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Allocated request</div>
        </div></li><li class='item'><div class='activity_date'>15/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Allocated request</div>
        </div></li><li class='item'><div class='activity_date'>21/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Failed request</div>
        </div></li><li class='item'><div class='activity_date'>26/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Failed request</div>
        </div></li><li class='item'><div class='activity_date'>31/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Declined request</div>
        </div></li><li class='item'><div class='activity_date'>04/11/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Failed request</div>
        </div></li><li class='item'><div class='activity_date'>13/11/2012</div>
        <div class='activity_box'>
        <div...

CSS

.activity_box {
    width: 100%;
    background-color: #EAEAEA;
    display: inline-box;
}
.activity_text {
    padding-left: 90px;
}
.activity_box:hover {
    background-color: #F7F7F7;
    cursor: pointer;
    color: #C41C7B;
}
.activity_date {
    background-color: #cc0066;
    color: #FFF;
    width: 80px;
    text-align: center;
    display: inline-box;
    float:left;
}
#wrapper ul {
    list-style-type: none;
    padding-left: 0px; 
}
#wrapper li {
    height: 40px;
    line-height: 30px;
    list-style-type: none;
}

JavaScript

$(window).load(function() {
    var itemsArray = $.makeArray($("li.item"));
    itemsArray.sort(function(a,b){
        var aTime = new Date(parseDate($(a).find('.activity_date').text())).getTime();
        var bTime = new Date(parseDate($(b).find('.activity_date').text())).getTime();
        return bTime - aTime;
    });

    $('#sortAsc').click(function(){
        $("#wrapper").empty().append("<ul></ul>");
        $(itemsArray).each(function(){
            $("#wrapper ul").prepend($(this));
        });
    });

    $('#sortDesc').click(function(){
        $("#wrapper").empty().append("<ul></ul>");
        $(itemsArray).each(function(){
            $("#wrapper ul").append($(this));
        });
    });        
});


function parseDate(input) {
    var parts = input.match(/(\d+)/g);
    var date = new Date(parts[2], parts[1], parts[0], 0, 0, 0);
    return date;
}