jQuery.cookie is not a function

Question

I'm getting the following error in console when clicking the "OK" button:

Uncaught TypeError: jQuery.cookie is not a function

on my popup and I'm not sure why. I have included the latest jQuery library as well as jQuery-cookie.js (in that order) but I'm still getting this error which is stopping the close button from working.

The popup slides in fine but it just won't close.

Here's my code:

(function() {
var a = "klmcookie";
localStorage.debug && jQuery.removeCookie(a);
jQuery.cookie(a) || (d = document, s = d.createElement("style"), c = d.createTextNode('.cookie {width: 100%;background: #132762;padding:5px 15px;top:0;left: 0;position: relative;color: #fff;font-family: helvetica;font-size: 16px;display: none; border-bottom: 2px solid #ffffff; z-index: 99999;}.cookie strong {color: #E40C2F;display: block;margin-bottom: 10px;font-size: 14px;}.cookie:after {content: "";clear: both;display: table;}.cookie .cookie-text {width: 73%;float: left;font-size: 12px; line-height: 18px; margin-bottom: 0; padding-bottom: 0;}.cookie p {display: inline-block;text-align:left;}.cookie a {color: #fff;}.cookie button {text-align: right;background: #fff;padding: 5px; font-size: 12px;border: none;margin-bottom: 0;color: #132762;transition: all 250ms ease-in-out;-webkit-transition: all 250ms ease-in-out;-moz-transition: all 250ms ease-in-out;-o-transition: all 250ms ease-in-out;}.cookie button:hover {background: #f4f4f4 !important;color: #132762;cursor: pointer;}.text-right {text-align: right;padding: 2px;}button {background: #fff !important;border-radius: none !important;padding-right: 0 !important;}button span {background: #fff;padding: 7px;margin-left: 5px;text-align:right;font-size: 14px;}.close-it {width: 26%;float: left;}@media screen and (min-width: 320px) and (max-width:768px) {.cookie {padding: 10px;width: 100%;}.cookie .cookie-text {width: 100%;float: left;font-size: 12px;}.cookie .cookie-text p {margin-bottom: 0;}.close-it {width:100%;float: left;padding-top: 10px;text-align: center;}}'),
    s.appendChild(c), d.head.appendChild(s), jQuery(".main-nav").prepend('<div class="cookie"> <div class="cookie-text"> <p>To give you the best possible experience, this site uses cookies. Continuing to use www.klmeng.co.uk means you agree to our use of cookies. If you would like to learn more about the cookies we use please view our <a href="https://klmeng.co.uk/privacy-policy/" style="text-decoration:underline">Privacy Policy</a>. </p></div><div class="text-right close-it">  <button id="accept" class="close">OK<span>&#8250;</span></button>  </div></div>'),
    jQuery(function() {
        var slide = function () {
            jQuery(".cookie").slideDown(300, 'swing');
        }
        window.setTimeout(slide, 3000);

        jQuery("#accept").click(function() {
            jQuery.cookie(a, !0, {
                expires: 30
            });
            jQuery(".cookie").slideUp(300, 'swing');
        });
    })) })();

I can't spot anything wrong so any insight as to why this isn't working correctly would be appreciated.