如何按字母顺序对两个不同的ul> li列表进行排序？

Question

您好，我创建了两个列表，并分成了原型联系人列表的标签。我添加了一个tinysort来对列表进行字母排序，但是它按字母顺序对所有<li>进行排序，这导致了Finn the Human等的重复。有没有办法分别对每个ul > li进行微小排序？

这是我的HTML：

<div class="header center">
    <h1>Your Contacts</h1>
    <a class="add-button"><i class="fas fa-plus-circle"></i></a></p>

    <div class="tab">
      <button class="tablinks" onclick="openList(event, 'Favourites')">Favourites</button>
      <button class="tablinks" onclick="openList(event, 'All')">All</button>
    </div>
</div>

<div id="Favourites" class="tabcontent contacts center">
    <ul>
        <li>Finn the Human</li>
        <li>Jake the Dog</li>
        <li>BMO</li>
    </ul>
</div>

<div id="All" class="tabcontent contacts center active">
    <ul>
        <li>Finn the Human</li>
        <li>Jake the Dog</li>
        <li>BMO</li>
        <li>Lady Rainicorn</li>
        <li>Marceline the Vampire Queen</li>
        <li>Princess Bubblegum</li>
        <li>Ice King</li>
        <li>Lumpy Space Princess</li>
        <li>Flame Princess</li>
    </ul>
</div>

我的脚本：

<script>
tinysort('ul > li', {
    charOrder: 'abcdefghijklmnopqrstuvwxyz'
});
</script>

<script>
function openList(evt, listName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(listName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>