Cannot parse html with js with vanilla js

I am trying to add my html website code from data-prototype:

<div id="accordion" data-prototype='
<div class="card-body">
    <textarea id="solution_answers___name___content" name="solution[answers][__name__][content]" required="required"></textarea>

    <script type="text/javascript">
        var CKEDITOR_BASEPATH = "/bundles/fosckeditor/";
    </script>
    <script type="text/javascript" src="/bundles/fosckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        if (CKEDITOR.instances["solution_answers___name___content"]) { 
            CKEDITOR.instances["solution_answers___name___content"].destroy(true); 
            delete CKEDITOR.instances["solution_answers___name___content"]; 
        }

            CKEDITOR.addTemplates("my_templates", {"templates":[{"title":"My 
            Template","description":"My awesome template","html":"<p>Crazy template :) 
            </p>"}]});

    </script>
</div>'></div>

As you can see, there is also some js code from ckeditor.

When I try to add it with jquery:

let el = document.querySelector('#accordion');
let template = el.dataset.prototype;
let $root = $(el);

$root.append(template);

Everything works fine, I mean there is no erros in console.

When I try to add it with vanilla js:

let el = document.querySelector('#accordion');
let template = el.dataset.prototype;
const scriptEl = document.createRange().createContextualFragment(template);
el.append(scriptEl);

In dev console, I am getting error:

Uncaught ReferenceError: CKEDITOR is not defined

If I execute the same script one more time, the error is gone, and everything works as expected.

Does someone know, why I am getting that error?

Here is the content of /bundles/fosckeditor/ckeditor.js