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).text().toLowerCase().localeCompare($(b).text().toLowerCase());

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