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"/>

<ul id="list">
   <li ><span>peter</span><span>812 jones st.</span></li>
   <li><span>zack</span><span>512 jones st.</span></li>
   <li><span>alex</span><span>712 jones st.</span></li>
   <li><span>sue</span><span>112 jones st.</span></li>
   <li><span>jenny</span><span>912 jones st.</span></li>
</ul>

JavaScript

function sortUnorderedList(ul, sortDescending) {
          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(lis[i].innerHTML);

          vals.sort();

          if(sortDescending)
            vals.reverse();

          for(var i = 0, l = lis.length; i < l; i++)
            lis[i].innerHTML = vals[i];
        }
        
        window.onload = function() {
          var desc = false;
          document.getElementById("test").onclick = function() {
            sortUnorderedList("list", desc);
            desc = !desc;
            return false;
          }
              
           document.getElementById("test1").onclick = function() {
            sortUnorderedList("list1", desc);
            desc = !desc;
            return false;
          }
        }