JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="test" value="sort by names"/>
<input type="button" id="test1" value="sort by address"/>

<ul id="list">
   <li ><span class="name">peter</span><span class="address"> 812 jones st.</span></li>
   <li><span class="name">zack</span><span class="address"> 512 jones st.</span></li>
   <li><span class="name">alex</span><span class="address"> 712 jones st.</span></li>
   <li><span class="name">sue</span><span class="address"> 112 jones st.</span></li>
   <li><span class="name">jenny</span><span class="address"> 912 jones st.</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++) {
        vals.push({
            sortFieldVal: lis[i].getElementsByClassName(sortClass)[0].innerText,
            val: lis[i].innerHTML
        });
    }

    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;
    }
}