Two JQuery functions, whichever is loaded second stops the first from working

Question

I have two jQuery document.ready functions, one is for a pop-up, the other is for a cookie notification banner. The problem I am encountering is when I load these separately whichever one I load second stops the first from working.
For example:

<script type="text/javascript">

   jQuery(document).ready(
    function() {
        jQuery("#bookdirectlink").click(function() {
            jQuery("#bookdirectp").show();
        });
        jQuery(".close").click(function() {
            jQuery("#bookdirectp").hide();
        });
    }

    );
</script>

<script type="text/javascript">
     jQuery(document).ready(
     function() {
     $('.cookie-message').cookieBar({ closeButton : '.my-close-button' });


     });

</script>

The second script then works and hides the cookie bar when the button is clicked, but the first script doesn't work. The reverse is true if I swap the scripts around. I've also tried combining the two into one ready statement, ie:

<script type="text/javascript">

   jQuery(document).ready(
    function() {
        jQuery("#bookdirectlink").click(function() {
            jQuery("#bookdirectp").show();
        });
        jQuery(".close").click(function() {
            jQuery("#bookdirectp").hide();
        });
         $('.cookie-message').cookieBar({ closeButton : '.my-close-button' });
    }

    );
</script>

But then none of the functions work.

The cookie bar runs from a script that I am loading in the header:

<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"/>

Any advice would be greatly appreciated.

This is the html for the cookie banner:

<div class="cookie-message">
    <p>We use cookies, including those by third parties, to improve our services, show you advertisements based on your preferences, perform statistical analysis on our users' browsing behaviour and simplify the interaction with social networks. If you continue browsing, we will assume that you agree with their use.</p><p> You can obtain further information here. <a href="/tcs-and-cookies/" class="privacylink">Privacy Policy</a></p> <a class="my-close-button" href>Accept</a>
</div>

And the html for the pop up:

<div id="directcontainer">

            <a class="close" href="#">X</a>
            <?php if(get_field('heading', 'option')){ ?><h2><?php the_field('heading', 'option'); ?></h2> <?php } ?>
            <?php if(get_field('main_text', 'option')){ ?><p><?php the_field('main_text', 'option'); ?></p> <?php } ?>
            <?php if(get_field('small_text', 'option')){ ?><p><span><?php the_field('small_text', 'option'); ?></span></p> <?php } ?>

<?php if(get_field('booking_button_link', 'option')){ ?><a href="<?php the_field('booking_button_link', 'option'); ?>" target="_blank" class="button"><?php if(get_field('booking_button_text', 'option')){ ?><?php the_field('booking_button_text', 'option'); ?></a> <?php } ?><?php } ?>
            </div>

Answer 1

Stupid mistake: I had <script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"/> instead of:

<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"></script>