I am having a bad time with external javascript external files

[iarxii]

I had moved almost all of the javascript in the onefit/app/index.php file to script.js, and I also had jquery code moved to its own dedicated file: jquery_functions.js -> renamed it to script_jquery.js. Issue here is that I had vanilla js functions calling jquery functions and were working fine on the local dev server, when I deployed a test build onto the live hosting server, I ran into problems:

1. Rocket Loader (Cloudflare optimisation) was deferring all js scripts and inline code, I have disabled it for the moment and I should add data-cfasync="false" attribute (before src attribute) to all scipts which I want rocket loader to ignore when I do choose to turn it back on.
2. jquery functions wrapped in $(document).ready are not recognized as functions when called by vanilla js funcs. I have tried moving all jquery funcs out of .ready block; works on local but not on hosting server.
3. Serious help needed for javascript testing and optimization

So I have resorted to placing all javascript function back into the app/index.php, works for now but is not good for performance, security and sustainability.