JSFiddle - React, Tailwind, and code Playground

by redler

HTML

<button id="doit">Sort!</button><br />
<ul class="hierarchyLeft3 filtererd">
    <li><a href=
        "/health-professionals/programs/omlc-cell-therapy-and-regenerative-medic/Pages/default.aspx">
        OMLC Cell Therapy and Regenerative Medicine Program</a></li>
    
    <li><a href=
        "/health-professionals/programs/omlc-hemorrhage-control-technology-progr/Pages/default.aspx">
        OMLC Hemorrhage Control Technology Program</a></li>
    
    <li><a href=
        "/health-professionals/programs/omlc-optics-program/Pages/default.aspx">OMLC Optics
        Program</a></li>        
    
    <li><a href=
        "/health-professionals/programs/center-for-outcomes-research-and-educati/Pages/default.aspx">
        Center for Outcomes Research and Education (CORE)</a></li>
    <li>
        <a href="/health-professionals/programs/camp-erin/Pages/default.aspx">Camp
            Erin</a>
        
        <ul>
            <li><a href=
                "/health-professionals/programs/providence-hospice-bereavement-services/Pages/default.aspx">
                Providence Hospice Bereavement Services</a></li>
            
            <li><a href=
                "/health-professionals/programs/providence-home-services/Pages/default.aspx">Providence
                Home Services</a></li>
        </ul>
    </li>
    <li><a href=
        "/health-professionals/programs/childrens-inpatient-care-unit/Pages/default.aspx">Children's
        Inpatient Care Unit</a></li>
    
    <li>
        <a href=
        "/health-professionals/programs/gerry-frank-center-for-childrens-care/Pages/default.aspx">
            Gerry Frank Center for Children's Care</a>
        
        <ul>
            <li><a href=
                "/health-professionals/programs/neurodevelopmental-center-for-children/Pages/default.aspx">
                Providence Neurodevelopmental Center for Children</a></li>
            
            <li><a href=
               ...

CSS

ul li:last-child { margin-bottom: 10px; }
ul { margin-left: 20px; }
li { list-style: circle; }

JavaScript

function sortItem(a, b) {
    return $.trim($(a).find('a').text()) > $.trim($(b).find('a').text()) ? 1 : -1;
}

function sortList(root) {
    $(root).children('li').sort(sortItem).appendTo(root).children('ul').each(function() {
        sortList(this);
    });
}

$('#doit').click( function(){
    sortList('ul.hierarchyLeft3');
});