JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<ul>
    <li id="b-link">b</li>
    <li id="d-link">d</li>
</ul>

CSS

li {
    width: 20px;
    height: 20px;
    background: yellow;
    margin: 4px;
}

JavaScript

$(function(){
    var order = ["a-link", "b-link", "c-link", "d-link", "e-link", "f-link"];        
        
    var toInsert = "c-link";
    var insertIndex = order.indexOf(toInsert);
 
    if($("ul>li").length === 0){

        $("ul").append(  $("<li>",{id:toInsert}));
        
    }else if($("#"+toInsert).length===0){
        var inserted = false;
                
        $("ul>li").each(function(){
            var $this = $(this);
   
            if(order.indexOf($this.attr("id"))>insertIndex){
                $this.before($("<li>",{id:toInsert}));
                inserted = true;
                return false;
            }
        });
        
        if(!inserted){
             // should be last
              $("ul").append($("<li>",{id:toInsert}));
        }
    }
});