How to pass model property from Razor View to JavaScript function

I have the following in my view

@{
    foreach (var book in @Books)
    {
        <tbody>
            <tr>
                <th scope="row">@book.Title</th>
                <th scope="row">@book.Author</th>
                <th scope="row">
                    <button onclick="favouriteBook(@book.Id)">Favourite</button>
                </th>
            </tr>
        </tbody>
    }
}

And a JavaScript function in a separate file (Which is being correctly loaded as I have tested with a console.log:

function favouriteBook(id) {
    localStorage.setItem("bookId", id); 
    // Later to be a DB, just testing for now. 
}

However when this function is called by the user clicking on the button, I get an Uncaught SyntaxError: Invalid or unexpected token error. What is wrong here?

Answer

Change your button html

<button id="@book.Id" class="favoriteBookBtn" onClick="favouriteBook(this.id)">Favourite</button>

But better way is to put the code in @scrips section of your view:

@section Scripts {
<script>

$(document).ready(function () {
    $(".favoriteBookBtn").click(function (e) {
e.preventDefault();
         var id=this.id;       
...your code
     });
});

</script>
}