Unable to use .find() to get value from table/form

$(".form").on('submit', function(event) {
  event.preventDefault(); //prevent the forms default action
  var surname = $(this).find(".surname");
  console.log(surname);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <form class="form" method="post" action="nextpage.php">
    <tr>
      <td class="name">john</td>
      <td class="surname">smith</td>
      <td>british</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>

  </form>

  <form class="form" method="post" action="nextpage.php">
    <tr>
      <td class="name">bob</td>
      <td class="surname">doe</td>
      <td>american</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>
  </form>
</table>