I am creating a small form based in a given json, but my dynamic imports are not working properly, it add only after the function is called causing a function to not be found.

In order to make this import I did this small function:

2. function include(scriptName){
3.     var head = document.getElementsByTagName('head')[0];
4.    
5.     script = document.createElement('script');
6.     script.src = scriptName;
7.     script.type = 'text/javascript';
8.    
9.     head.appendChild(script);
10. }
11. 
    

It works as it should, but the order is not being respected here. In my ready function I did:

2. $(document).ready(function(){
3. // import required scripts
4. importRequirements();
5. 
   
6. // 1. grab panel that will receive groups
7. $checklistPanel = $("#checklist-form");
9. // This setter will be here ONLY because the mock, must be removed once all is ok
10. setCurrentCheckList("Remove after this after checklist is done");
11. 
    
12. // 2. now, start creating groups
13. createGroups($currentCheckList.groups, $checklistPanel);
14. 
    
15. // 3. after group creation, transform it into an accordion
16. $checklistPanel.accordion({
17. collapsible: true
18. });
19. });

The import is there if I check the html in chrome console, but at the sources tab, it is added only after the exception is fired.

I tried adding it to document onload, the result was the same, it loads only after the method createGroups has been runned once.

Is there something that I can do without having to add it to the header? There are 9 scripts, and they will always be used when this script is used, that is why I am trying to add it programatically.