Calling Google Books API – Uncaught ReferenceError: field is not defined at HTMLButtonElement.

I am trying to call book data using Jquery, and it’s supposed to show an outpuList uppon click event when the search button is hit.

Here is the HTML code:

<div class="row">
            <div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
                <input id="search-field" type="text" class="form-control" placeholder="Search Books!..">
                <button id="search" class="btn btn-primary" onclick="">Search</button>
            </div>

Here is the JS code where the error points to:

//listener for search button
    $("#search").click(function() {
        outputList.innerHTML = ""; //empty html output
        document.body.style.backgroundImage = "url('')";
        searchData = $(search-field).val();  <-- Error points to this string in the Google Dev Tool

And displays the following error when the search button gets hit.

app.js:12 Uncaught ReferenceError: field is not defined
    at HTMLButtonElement.<anonymous> (app.js:12:31)
    at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2:43064)
    at v.handle (jquery-3.6.0.min.js:2:41048)

I’ve tried changing the string to

searchData = $(#search-field).val();

But then it produces this error:

app.js:12 Uncaught SyntaxError: Private field '#search' must be declared in an enclosing class (at app.js:12:23)

Any assistance will be greatly appreciated!!