Embed multiple BuildBubbles players on the same page

index.html

<div id="root">Loading...</div>
<script>
    (function (w, d, s, o, f, js, fjs) {
        w['BuildBubbles-Audio-Player'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'w1', 'https://vasinl124.github.io/buildbubbles-audio-player-widget/build/widget.js'));
    w1('init', { targetElementId: 'root' });
    w1('episodeid', { id: '<episodeId1>', center: true });
</script>

<div id="root2">Loading...</div>
<script>
    (function (w, d, s, o, f, js, fjs) {            
        w['BuildBubbles-Audio-Player1'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'w2', 'https://vasinl124.github.io/buildbubbles-audio-player-widget/build/widget.js'));
    w2('init', { targetElementId: 'root2' });
    w2('episodeid', { id: '<episodeId2>', center: true });
</script>

<div id="root3">Loading...</div>
<script>
    (function (w, d, s, o, f, js, fjs) {            
        w['BuildBubbles-Audio-Player2'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'w3', 'https://vasinl124.github.io/buildbubbles-audio-player-widget/build/widget.js'));
    w3('init', { targetElementId: 'root3' });
    w3('episodeid', { id: '<episodeId3>', center: true });
</script>