JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="main-menu">
    <li><a href="#page-1" class="slide-item selected">page 1</a></li>
    <li><a href="#page-2" class="slide-item">page 2</a></li>
    <li><a href="#page-3" class="slide-item">page 3</a></li>
    <li><a href="#page-4" class="slide-item">page 4</a></li>
</ul>

<div class="test">
    <div id="page-1" class="page">page-1 content</div>
</div>

JavaScript

$.fn.insertAt = function(index, elements){
    var children = this.children();
    if(index >= children.size()){
        console.log(index+'>='+children.size());
        this.append(elements);
        return this;
    }
    var before = children.eq(index);
    $(elements).insertBefore(before);
    return this;
}; //http://upshots.org/javascript/jquery-insert-element-at-index

jQuery('.slide-item').on('click', function(){
    var item = jQuery('a[href="'+jQuery(this).attr('href')+'"]').parent();
    var index = jQuery("ul li").index(item);
    //console.log(index);
    var target = jQuery(this).attr('href').substr(1);
    
    if(jQuery(jQuery(this).attr('href')).length){
        console.log('loaded');
    }else {
        //jQuery.get("pages/"+target+".html", function(data){
        //    jQuery('.test').insertAt(index, data);
        //});
        
        // the insert page number happens to be the index
        var data = '<div id="' + target + '" class="page">' + target + ' content</div>';
        var toInsertPageNumber = index;
        var didInsert = false;
        jQuery('.test').children().each(function(k, v) {
            var currentPageNumber = parseInt($(v).attr('id').replace('page-', ''), 10);
            
            if (currentPageNumber > index) {
                jQuery('.test').insertAt(k, data);      
                didInsert = true;
                return false;
            }
        });
        
        // if we didn't insert anything, then it goes to the end of the list.
        if (!didInsert) {
            jQuery('.test').append(data);
        }
    }
    
    return false;
});