JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <section id="section0"></section>
    <section id="section1"></section>
    <section id="section2"></section>
    <section id="section3"></section>
    <section id="section4"></section>
    <nav>
        <button onclick="fetchChapter()">Next section</button>
    </nav>
</body>

CSS

section {
    border: 1px solid black;
    margin: 4px;
}

JavaScript

var cacheSize = 5;
var chapters = [];
var requestNum = 0;
function fetchChapter() {
    var x = new XMLHttpRequest();
    // adjust the GET URL to reflect the new n value and request as before
    x.open('GET', 'http://tmaserv.scem.uws.edu.au/chapters/?n=' + requestNum++, true);
    x.onreadystatechange = function () {
        if (x.readyState == 4 && x.status == 200) {
            obj = (x.responseText);
            JSON.parse(x.responseText);
            obj = JSON.parse(obj);
            chapters.push(obj.data);
            if (chapters.length > cacheSize) {
                chapters.shift();
            }
            
            for (var i = 0; i < chapters.length; ++i) {
                document.getElementById("section" + i).innerHTML = chapters[i];
            }
        }
    }

    x.send(null);
}