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">
        <div class="page-container">
             <h3>page 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque</p>
        </div>
    </div>
</div>

JavaScript

function addPage(id, page) {
    if (!$('#' + id).length) {
        // find the last page div with id smaller than target id
        $prevDiv = $('div.page', '.test').filter(function () {
            return $(this).attr('id') < id;
        }).last();

        // and append the new page after it
        $prevDiv.after(page);
    }
}

$(function () {
    $('.slide-item').on('click', function () {
        var id = $(this).attr('href').substring(1);
        if ($('#' + id).length) {
            return;
        }
        $.post("/echo/html/", {
            html: '<div id="' + id + '" class="page">' + id + '</div>'
        }, function (page) {
            addPage(id, page);
        });
    });
});