JS not firing

[maslerdanch]

Having trouble as to why this preloader is not firing and hiding. jQuery is being loaded in the head by wordpress but something is blocking the js in the footer. Link to Staging

<script type="text/javascript">$("#status").fadeOut(); // will first fade out the loading animation
$("#preloader").delay(1).fadeOut("slow"); // will fade out the white DIV that covers the website.
</script>

<style id="compiled-css" type="text/css">
      #preloader  {
                position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #406834fc;
            z-index: 99999;
            height: 100%;
        }
#status  {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 50%;
     top: 50%;
     background-image: url(https://www.colletts.co.uk/wp-content/uploads/2019/11/colletts-walking-holidays-logo-white.svg);
     background-repeat: no-repeat;
     background-position: center;
     margin: -100px 0 0 -100px;
 }
  </style>


    <?php if (get_field('loader','option') == 'on') : ?>
        <div id="preloader">
        <div id="status">&nbsp;</div>
        </div>
    <?php endif; ?>