JSFiddle - React, Tailwind, and code Playground

by Ron Valstar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<div class="box">
    <ul>
        <li><a href="#">John</a>
            <div class="bubble">
                <p><strong>John</strong></p>
                <p>
                    <time datetime="01/01/1950">01/01/1950</time> -
                    <time datetime="10/02/2005">10/02/2005</time>
                </p>
            </div>
        </li>
        <li><a href="#">Alice</a>
            <div class="bubble">
                <p>Alice</p>
            </div>
        </li>
        <li><a href="#">Mary</a>
            <div class="bubble">
                <p>Mary</p>
                <p>
                    <time datetime="01/02/1920">01/02/1920</time> -
                    <time datetime="01/02/2015">01/02/2015</time>
                </p>
            </div>
        </li>
    </ul>
</div>
<button>sort</button>

JavaScript

var listElements = document.querySelectorAll('li');
for (var i=0,l=listElements.length;i<l;i++){
var li = listElements[i],
time = li.querySelector('time'),
date = time&&new Date(time.getAttribute('datetime'));
date&&li.setAttribute('data-timestamp',date.getTime());
}
document.querySelector('button').addEventListener('click',function(){
tinysort(listElements,{data:'timestamp'});
});