$ is not defined referenceError JS Form submission

Question

I am trying to submit a simple GET request with a form and am stuck with the following error:

Uncaught ReferenceError: $ is not defined at index.html:80

For reference, Line 80 on index is the first line of the script block, it doesnt seem able to identify document, or even by the id of the form if i remove the document.ready block.

Form is:

<form id="search-form" method="GET">
    <div class="inner-form">
    <div class="input-field">
    <button class="btn-search" type="submit" value="Submit" id="btnSubmit">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
    </svg>
    </button>
    <input id="song-title" type="text" placeholder="What song are you looking for?" />
    </div>
    </div>
    </form>

Javascript is:

   <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSubmit").click(function (event) {
                //stop submit the form, we will post it manually.
                event.preventDefault();

                var searchQuery = $("#song-title").val()
                var songSyntax = searchQuery.concat("&type=track&market=GB&limit=1&offset=5")
                var api_url = "https://api.spotify.com/v1/search?q=".concat(songSyntax)
         
                // disabled the submit button
                $("#btnSubmit").prop("disabled", true);
         
                $.ajax({
                    type: "GET",
                    url: api_url,
                    contentType:  'application/json',
                    success: function (data) {
                        $("#server-results").text(data);
                        console.log("SUCCESS : ", data);
                        $("#btnSubmit").prop("disabled", false);
                    },
                    error: function (e) {
                        $("#server-results").text(e.responseText);
                        console.log("ERROR : ", e);
                        $("#btnSubmit").prop("disabled", false);
                    }
                });
            });
        });
    </script>

Any help is appreciated. Thanks