I have put together a sort of tag dependency manager to append script tags in the correct order. The handle when it has been loaded:

script = document.createElement('script');
...
document.body.appendChild(script);
script.addEventListener('load', (event) => ...)

Within the add event listener handler, it will append the next script tag(s) that dependencies have been met (e.g. slick carousel script tag is dependent on jquery script tag)

Looking at the DOM, I can see that scripts have been appended in the correct order:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

However, I'm occasionally getting errors in slick.min.js complaining that $ (jquery) isn't declared even though the order of script tags is always correct. But if I do a few refreshes, it'll be fine then after a few more refreshes I'll get the same issue. Is 'load' firing when the script has been parsed fully?