Larvel+jquery I want to be able to get the id of the listed data on the console side of js.

The ultimate goal is to use Ajax to delete the listing button, which is asynchronous and can be removed from the UI.
As a preliminary step, we would like to implement a function that can only be deleted on the front side of the jquery.
In addition, as a way to implement this feature, if you click the button, you will need to get the id of each list on the js side, which is a struggle.

I want to create an html data attribute and get an id on the front side, but I can only get the first id of the list when I click it
How can I get each id by clicking on the button on the list that I got from laravel?If you have any advice, please take care of it.

blade file The process is to get 10 $songs from SongTable.I will omit the code for this variable as the main question is from the front desk.

<table class="table table-striped">
 <thead>
  <tr>
   <th>Title </th>
  </tr>
 </thead>
 <tr>
  @foreach($songs as$song)
  <divid="delete-item">
   <td class="align-middle">
    <a href="{{route('admin.show', ['id'=>$song->id]}}">
     {{ $song->title}}
    </a>
   </td>
   <td class="align-middle">
    // Here it is.
    <button id="delete-btn" data-id="{{$song->id}}" class="btn btn-danger">delete</button>
   </td>
 </tr>
 </div>
 @endforeach
</table>

$(function(){
 $('#delete-btn').on("click", function(){
  console.log($('#delete-btn') .data())
 });
});