showing data in modal in laravel - php

Question

I'm using Laravel and I'm trying to delete or update the services on my platform
I'm using confirmation modal for that..
but when I delete or or update or show content in the modal it always works on the first row only...
that's the code
#foreach ($services as $service)
<div class="card-content">
<div class="row">
<div class="col l4">
<div class="row">
<div class="col s12">
<span>
<a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light red hoverable"
data-position="left"
data-tooltip="Supprimer ce service"
data-text-color="grey-text"
href="#modal1">
<i class="material-icons">delete</i>
</a>
</span>
<span>
<a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green"
data-position="right"
data-tooltip="Modifier ce service"
data-delay="20"
href="#modal2">
<i class="material-icons" href="#modal2">update</i>
</a>
</span>
</div>
</div>
<div id="modal1" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s6">
<p>Voulez vous vraiment supprimer ce service ?</p>
</div>
<div class="col s6">
<form action="/Services/{{$service->id}}" method="POST">
{{ csrf_field() }}
#method('DELETE')
<span>
<input type="submit" class="btn purple hoverable waves effect" value="supprimer">
</span>
<span>
Non
</span>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach

Answer 1

Invoke modal via jquery like
$('#myModal').modal('show');
$('#myModal').modal('hide');
In Loop Anchor
<span>
<a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green modalclick"
data-position="right"
data-tooltip="Modifier ce service"
data-delay="20"
data-id="<?php echo $service->id; ?>"
href="javascript:void(0)"
>
<i class="material-icons" href="#modal2>update</i>
</a>
</span>
$(".modalclick").click(function(){
var current_id = $(this).attr("data-id");
//use jquery below to change modal form action with id
$('#myModal').modal('show');
});

Answer 2

Define modal popup for each record if you in loop if you dont want to use jquery that get and service id and pass into modal form.
<?php $a = 1; ?>
#foreach ($services as $service)
<div class="card-content">
<div class="row">
<div class="col l4">
<div class="row">
<div class="col s12">
<span> <a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light red hoverable" data-position="left" data-tooltip="Supprimer ce service" data-text-color="grey-text" href="#modal{{$a}}"><i class="material-icons">delete</i></a></span>
<span> <a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green" data-position="right" data-tooltip="Modifier ce service" data-delay="20" href="#modal2"><i class="material-icons" href="#modal2">update</i></a></span>
</div>
</div>
<div id="modal{{$a}}" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s6">
<p>Voulez vous vraiment supprimer ce service ?</p>
</div>
<div class="col s6">
<form action="/Services/{{$service->id}}" method="POST">
{{ csrf_field() }}
#method('DELETE')
<span>
<input type="submit" class="btn purple hoverable waves effect" value="supprimer">
</span>
<span>
Non
</span>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $a++; ?>
#endforeach
See if it is work for you.