I am trying to perform a query where the id is shown in an image and I am trying to insert a modal that when exiting, shows information regarding the id, in a table the information is fine, but when inserting the modal, the information is repeated and does not correspond to ID If you could help me I would greatly appreciate it! I attach the code and the images of my result. In this part the query is shown, in the Fade in Modal button the description of each Id must be displayed, if the id is two it should say kitten, if the Id is 6, it should say another and so on
When pressing the button, the description referring to id2 should be displayed, but it shows me the number 7, and that is what happens to me with all the buttons
code of my table
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!--COMIENZA CATALOGO -->
<center> <h2>Publicidad</h2></center>
<div class="container"> <table id="a1" class="table table-striped table-bordered" style="width:100%">
<thead>
<th>id</th>
<th>Descripcion</th>
<th>Imagen</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
@foreach ($a1 as $a2)
<tr>
<td>{{$a2->id}}</td>
<td>{{$a2->descripcion}}</td>
<td> <img style="width:85px; height:85px;" src="{{ asset('imag/'.$a2->imagen) }}"></td>
<td> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Fade In Modal</button>
</a>
</tr>
@endforeach
</tbody>
</table>
</div>
<div id="id01" class="w3-modal w3-animate-opacity">
<div class="w3-modal-content w3-card-4">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-large w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div class="w3-container">
<p>{{$a2->descripcion}}</p>
</div>
<footer class="w3-container w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
</div>
<!--TERMINA EL CATALOGO-->
As you can see I'm bringing the information with a foreach, I don't know if I should use jquery, honestly I don't know much about it so I didn't try it like that.
Since the question only has "laravel" tag, what you can do is create a modal for each row of the table. You will have to put a unique id to each one, for which you can use the variable
$loop