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

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

    $('#sortAsc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").prepend($(this));
        });
    });

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