all the code need to be in document ready function code example

Example: jquery document ready

The .ready() method is typically used with an anonymous function:
$( document ).ready(function() {
  // Handler for .ready() called.
});

Which is equivalent to the recommended way of calling:
$(function() {
  // Handler for .ready() called.
});