JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="links">
    <li>http://example.com/<span> 106</span></li>
    <li>http://example.com/<span> 42</span></li>
    <li>http://example.com/<span> 28</span></li>
    <li>http://example.com/<span> 4</span></li>
</ul>

JavaScript

function linkAdd(newLink) {
    var sortedLinks = [];
    $("#links li").each(function(i, item) {
        sortedLinks.push($(this).html());
    });
    var totalLinks = sortedLinks.length;
    if (totalLinks == '0') {
        $(newLink).prependTo('#links ul');
    } else {
        sortedLinks.push(newLink);
        sortedLinks.sort(function(a, b) {
            var aCount = $(a).find('span').text();
            $(a).find('span').css('color','red')
            var bCount = $(b).find('span').text();
            return aCount > bCount ? 1 : -1;
        });
        var newLinkPosition = $.inArray(newLink, sortedLinks);
        $("#links ul li:nth-child(" + newLinkPosition + ")").before(newLink);
    }
}

newLink = "<li>http://example.com<span> 31</span></li>"

//This should insert newLink into #links at the correct position between 42 and 28... but it does not.
linkAdd(newLink);