closest('tr') value is undefined when getting id from table

Question

Trying to get the ID from table when button clicked, but alert box showing "undefined"

<table id="buffalosummery" class="table table-bordered table-hover table" style="width:100%">
   <thead>
      <tr>
         <th>ID</th>
         <th>Breed Type</th>
         <th>Gender</th>
         <th>Purchase Date</th>
         <th>Purchase Price</th>
         <th>Pregnant</th>
         <th>Avg Milk / Day</th>
         <th>Health Status</th>
         <th>Animal Status</th>
         <th>Action</th>
      </tr>
   <tbody>
      @foreach ($buffalodata as $item )
      <tr>
         <input type="hidden" class="deletebuffaloid" value="{{$item->buffaloID}}">
         <td>{{$item->buffaloID}}</td>
         <td>{{$item->breedtype}}</td>
         <td>{{$item->gendertype}}</td>
         <td>{{ date('d-m-Y', strtotime ($item->purchasedate)) }}</td>
         <td>{{$item->purchaseprice}}</td>
         <td>{{$item->pregnant}}</td>
         <td>{{$item->avgmilk}}</td>
         <td>{{$item->health}}</td>
         <td>{{$item->status}}</td>
         <td>
            <a href="{{ route('viewBuffalobyid', ['buffaloid' => $item->buffaloID]) }}" class="btn btn-primary">View</a> 
            <button type="button" class="btn btn-danger deletedatabtn"><i class="fas fa-trash" title="Delete"></i></button>
         </td>
      </tr>
      @endforeach
   </tbody>
   </thead>
</table>

Delete button Event

$('.deletedatabtn').on('click', function () { 
    var delete_buffaloid = $(this).closest('tr').find('.deletebuffaloid').val();
    alert(delete_buffaloid);
}

Did i miss, something..... Thanks