jQuery in functions.php – Uncaught TypeError: $ is not a function

I’m trying to add a small amount of code to a WordPress site in the functions.php file. I’ve tested the code in Codepen and it works perfectly.

However, when I add it to the site, I get the following error message in the console

Uncaught TypeError: $ is not a function

I feel like I’m close, but obviously not close enough! I’d be grateful for any advice.

add_action('wp_footer', 'wpb_hook_javascript_footer');
function wpb_hook_javascript_footer() {
    ?>
    <script>
var thehours = new Date().getHours();
var theday = new Date().getDay();
    var themessage;
    var morning = ('Order before 2pm for guaranteed dispatch TODAY');
    var evening = ('Order now for guaranteed dispatch TOMORROW');
    var friday = ('Order now for guaranteed dispatch on MONDAY');

    if ((thehours >= 0 && thehours < 14 && theday == 1) ||
    (thehours >= 0 && thehours < 14 && theday == 2) ||
    (thehours >= 0 && thehours < 14 && theday == 3) ||
    (thehours >= 0 && thehours < 14 && theday == 4)) {
     themessage = morning;

    } else if ((thehours >= 14 && thehours < 24 && theday == 1) ||
               (thehours >= 14 && thehours < 24 && theday == 2) ||
               (thehours >= 14 && thehours < 24 && theday == 3) ||
               (thehours >= 14 && thehours < 24 && theday == 4) ||
               (thehours >= 0 && thehours < 24 && theday == 0)) {
                themessage = evening;

    } else if ((thehours >= 14 && thehours < 24 && theday == 5) ||
               (thehours >= 0 && thehours < 24 && theday == 6)){
                themessage = friday;
  }

    $('.checkout_dispatchtime').append(themessage);
    </script>
    <?php
}