Serialize the specific form in Ajax request POST – Jquery ajax

I have Table of Books, for each row there’s book no, and book name and delete button which will delete the book
and i am using ajax for deleting, the problem i have when i click the delete button it always delete the first book in the table , any help thanks.

<table>
 <thead>
  <tr>
   <th>Book NO</th>
   <th>Book Name</th>
   <th>Remove</th>
  </tr>
 </thead>
 <tbody>
  {% for book in book_List %}
   <tr>
    <td>{{book.no}}</td>
    <td>{{book.name}}</td>
    <td>
     <form method="POST">
      <input type="hidden" name="remove_uuid" value="{{ book.uuid}}">
      <button onclick="delete()">Delete</button>

     </form>

    </td>
  </tr>
 {%endfor%}
 </tbody>
</table>

script

function delet(){
     $.ajax({
     type:'POST',
     data: $('form').serialize(),
     success: function (data) {
       alert("the book has been delete it")
     }
}