JSFiddle - React, Tailwind, and code Playground

by Cwalkdawg

HTML

<a href="#">Toggle Sort</a>

<ul>
    <li>Apple</li>
    <li>Bascket</li>
    <li>Umberla</li>
    <li>Zebra</li>
    <li>Good Student</li>
    <li>Liable</li>
</ul>

JavaScript

$("a").on("click", function () {
    var parentList = $("ul");
    var elements = parentList.children("li").get();
    var sorted = !parentList.is(".sorted") ? function () {
            elements.sort(function (a, b) {
                var a1 = $(a).text().substring(0, 1);
                var b1 = $(b).text().substring(0, 1);
                parentList.addClass("sorted");
                if (a1 > b1) {return 1;}
                if (a1 < b1) {return -1;}
                return 0;
            });
            return elements;
        } : elements.reverse();
    parentList.append(sorted);
});