I have a question regarding jquery and modal in my laravel project (here it's a blade file). I have a table of several artist, each row reference an artist. There is also a column delete. For each row of artist, when I click on delete, the modal appears asking if i am sure to cancel etc... I am able to delete the first artist but if I select another one, it doesn't work. I think I have to take the id of the artist but I don't know how, someone can help ? Thanks
<div class="col-md-8">
<table class="table table-bordered table-striped table-condensed css-serial">
<div class="btn pull-right col-md-4">
<a class="btn btn-primary" href="{{ route('create-artist') }}" role="button">Create a new Artist or Band</a>
</div>
<thead>
@if(!$artists->isEmpty())
<h1>ARTISTS & BANDS:</h1>
<tr>
<th>#</th>
<th>Artist</th>
<th>Music genre</th>
<th>Picture</th>
<th>Edition</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
@foreach ($artists as $artist)
<form>
<tr>
<td></td>
<td>{{ $artist->artist_name}}</td>
<td>{{ $musicgenres[$artist->music_genre]}} </td>
<td><img src="../images/uploads/pictures_band/{{$artist->picture}}" style="width:80px; height:80px; border-radius:50%;" ></td>
<td><a href="{{ route('edit-artists', ['id' => $artist->id]) }}" class="btn btn-success" id="bt">Show</a></td>
<td><a class="btn btn-danger" id="delete_id">Remove</a></td>
</tr>
</form>
<div id="delete-confirm" class="modal" data-backdrop="static" data-keyboard="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Warning</h4>
</div>
<div class="modal-body">
<p class="text-center">Are you sure you want to delete this Artist ? It will delete Tour and concert belong to this artist !</p>
<form action="{{ route('delete-artists', ['id' => $artist->id] )}}">
<div class="text-center" >
<button type="submit" class=" btn btn-primary " > Okay</button>
<button type="button" class=" btn btn-primary " data-dismiss="modal" > Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endforeach
@else
<h3>'There is no artist or band yet !'</h3>
@endif
</tbody>
</table>
</div>
<script>
$('#delete_id').on('click',function(){
//var id = $(this).attr('id')
$('#delete-confirm').modal('show');
});
</script>