Embedding multiple instance of the REPL on a single web page

1

I couldn’t quite figure out how to embed multiple instances on a single web page, but I managed to kludge something up by running the following code multiple times

<div id="div1">
    console.log("hello world");
</div>

<div id="div1">
    console.log("goodbye world");
</div>

var src1 = document.getElementById("div1").innerHTML;
document.getElementById("div1").innerHTML = '';

var nb1 = RunKit.createNotebook({
    // the parent element for the new notebook
    element: document.getElementById("div1"),

    // specify the source of the notebook
    source: src1
})

var src2 = document.getElementById("div2").innerHTML;
document.getElementById("div2").innerHTML = '';
var nb2 = RunKit.createNotebook({
    // the parent element for the new notebook
    element: document.getElementById("div2"),

    // specify the source of the notebook
    source: src2
})

and so on. This actually works, but is super-inefficient. When I launch my presentation, multiple calls to RunKit are made even though the entire page is loaded only once. Since the web page itself is being loaded only once, RunKit should be called only once. At least, that is what I think (obviously, it seems I am wrong).

Finally, the actual RunKit REPL frame takes a while before it is rendered. In the beginning, only a few lines of truncated code shows up, but after a while of waiting, the entire frame gets rendered.

What am I doing wrong? Is there a better way of doing this?