JSFiddle - React, Tailwind, and code Playground

by Tim Peterson

HTML

<input type="button" id="test" value="sort by names"/>
<input type="button" id="test1" value="sort by address"/>
<input type="button" id="test2" value="sort by date"/>
<ul id="list">
    <li ><span class="name">peter</span><span class="address"> 812 jones st.</span><span class="date">October 14, 1975 11:13:00</span></li>
   <li><span class="name">zack</span><span class="address"> 512 jones st.</span><span class="date">December 13, 1975 11:13:00</span></li>
   <li><span class="name">alex</span><span class="address"> 712 jones st.</span><span class="date">October 13, 1975 11:13:00</span></li>
   <li><span class="name">sue</span><span class="address"> 112 jones st.</span><span class="date">March 01, 1975 11:13:00</span></li>
   <li><span class="name">jenny</span><span class="address"> 912 jones st.</span><span class="date">October 13, 1979 11:13:00</span></li>
</ul>

JavaScript

function sortUnorderedList(ul, sortDescending, sortClass) {
    if (typeof ul == "string") {
        ul = document.getElementById(ul);
    }

    var lis = ul.getElementsByTagName("LI");
    var vals = [];

    for (var i = 0, l = lis.length; i < l; i++) {
        
var className=lis[i].getElementsByClassName(sortClass)[0].innerText;
    if(className=="date")
    var value=Date(lis[i].innerHTML);
    else value=lis[i].innerHTML;
    
        vals.push({
            sortFieldVal: lis[i].getElementsByClassName(sortClass)[0].innerText,
            val: value
        });
    }

    vals.sort(function(a, b) {
        var nameA=a.sortFieldVal.toLowerCase(), nameB=b.sortFieldVal.toLowerCase()
        if (nameA < nameB) //sort string ascending
        return -1 
        if (nameA > nameB)
        return 1
        return 0 //default return value (no sorting)
    });

    if (sortDescending) vals.reverse();

    for (var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i].val;
}

window.onload = function() {
    var desc = false;
    document.getElementById("test").onclick = function() {
        sortUnorderedList("list", desc, "name");
        desc = !desc;
        return false;
    }

    document.getElementById("test1").onclick = function() {
        sortUnorderedList("list", desc, "address");
        desc = !desc;
        return false;
    }
    
    document.getElementById("test2").onclick = function() {
        sortUnorderedList("list", desc, "date");
        desc = !desc;
        return false;
    }              
}