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;
        
        for(var i = insertIndex + 1, len = order.length; i<len; i++){
            var $el = $("#" + order[i]);
            
            if($el.length > 0){
                $el.before($("<li>",{id:toInsert}));
                inserted = true;
                break;
            }
        }
        
        if(!inserted){
             // should be last
              $("ul").append($("<li>",{id:toInsert}));
        }
    }
});