JSFiddle - React, Tailwind, and code Playground

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() > b.innerHTML.toLowerCase();

    }
    $this = $("ol#table1");
    var list = $this.children();
    list.sort(sort_by_name);
    console.log(list);
    $this.html(list);
});