JS modal did not pop onclick

i want open a JS modal on click of Delete button to ask “are you want to delete this record” then it has two button cancel and delete. when i click the delete button on category page it does not any pop us where as in console it throw an error categories:654 Uncaught TypeError: deleteConfirmation is not a function

Here is my code:

categories.blade.php file

<tbody>
    @php
      $serial_no = ($categories->currentPage()-1)*$categories->perPage();
    @endphp
    @foreach ($categories as $category)
        <tr>
          <td>{{ ++$serial_no }}</td>
          <td>{{ $category->name }}</td>
          <td>{{ $category->slug }}</td>
           <td>
              <a class="text-info" style="margin: 0px 20px; " href="{{ route('admin/category.edit',['category_id'=>$category->id]) }}">Edit</a> 
              <a class="text-danger" style="margin-left: 20px;" href="#" onclick="deleteConfirmation({{ $category->id }})">Delete</a>
           </td>
       </tr>
   @endforeach
</tbody>

this is the modal code (in same page)

<div class="modal" id="deleteConfirmation">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body pb-30 pt-30">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <h4 class="pb-3">Are you sure want to delete record?</h4>
                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#deleteConfirmation">Cancel</button>
                        <button type="button" class="btn btn-danger">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Js script(in same page)

@push('scripts')
    <script>
        function deleteConfirmation(id)
        {
            @this.set('category_id',id);
            $('#deleteConfirmation').modal('show');
        }
    </script>
@endpush