first of all, beautiful work and excellent work overall.
$(document).ready is only used when you want all this taking place when your document (HTML (document structure)) is ready, yet you do not want to wait that long. You need to break your code into functions like you have...and only put certain stuff in .ready https://www.w3schools.com/jquery/event_ready.asp
read the link. You want maybe certain things to be available,
why not use onload (not saying you need to use it)
You can say when certain data is avaialbe GO AT IT, that is where onload is WAY more appropriate.
Also, even if your code has absolutely no errors and is logical, and you take all the stuff out of $(document).ready function because it does not need to live inside it, because its too long to wait, and you can use some of theses variables as globals , it will be way better.
< script src="./pathToYourfile/yourFilename.js" > < / script > or simply ./yourFilename.js if all your stuff are in same directory.
Use the script tags like I showed you and do this:
If you passing values from html then like this:
< ELEMENT onload = "someFunction('value','value2','value3')">
the onload will run when THIS specific element Object is loaded.
Read here again: