Calling javascript in javascript works for some but not all scripts [migrated]

I have the following code in a script.js file that I call in my html file:

function loadScript(url) {         var head = document.getElementsByTagName('head')[0];     var script = document.createElement('script');     script.type = 'text/javascript';     script.src = url;     script.async = false;     head.appendChild(script); }  loadScript('https://polyfill.io/v3/polyfill.min.js?features=es6') loadScript('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js') loadScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js')  hljs.initHighlightingOnLoad(); 

I use this code because I want to call only one .js file in my html instead of multiple .js files.

The first two scripts that I load to call MathJax work fine. The third script to call highlight.js however does not run.

When I paste all the code from the file ‘highlight.min.js’ into the my script.js file, the javascript does run normally when I open the html.

I don’t understand why loading the ‘highlight.min.js’ file with the loadScript() does not work, or what I can do to get it to work. Any help is appreciated.