Problem to pass multiple arguments to javascript function inside razor page!

Hi

i have a simple asp.net core project which display persons with orders for each person.

Here is my chtml code :

@model IEnumerable<Persons><table class="table table-bordered"><tr><th>Person ID</th><th>Person Name</th><th>Description</th><th>Commands</th></tr>
    @if (Model != null)
    {
        foreach (var item in Model)
        {<tr onclick="viewItem(@item.PersonId, @item.PersonName)"><td>@item.PersonId</td><td>@item.PersonName</td><td>@item.Description</td><td>                   </td></tr>
        }
    }</table><div id="htmOrders">Orders</div><hr />

@section Scripts{ 
    
    <script>       
        function viewItem(personId, personName) {$('#htmOrders').html('Orders for ' + personName + '(' + personId + ')');
        }</script>

}

As u sess in my above code, i Have a simple javascript function named 'viewItem' which works correctly with single argument! My problem is that when add second argument and pass personName to it, at runTime i've got error in console :

SyntaxError: missing ) after argument list

Where is my probelm & how to solve it?

Thanks in advance