JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<ol id="table1" style="display: block; "><li class="menu__run">I</li><li class="menu__run">IXX</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__run">IXX</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__run">I</li><li class="menu__test">st</li><li class="menu__test">st</li><li class="menu__test">st</li></ol>
<div id="btn">sort</div>

CSS

div#btn{
    background:lightblue;
    border: 1px solid black;
    margin: 0.15em 0.25em;
    width:5em;
}

JavaScript

$("div#btn").click(function() {
    var sort_by_name = function(a, b) {
        return a.innerHTML.toLowerCase().localeCompare(b.innerHTML.toLowerCase());
    }
    
    var list = $("#table1 > li").get();
    list.sort(sort_by_name);
    for (var i = 0; i < list.length; i++) {
        list[i].parentNode.appendChild(list[i]);
    }
});