Pop-up modal on each element of a list - php

Question

recently I,ve been trying to make a modal to pop-up on every element of a list. That list comes from a MySQL Database with this code:
<?php
$page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
$cadenaSQL = "SELECT idPedido, fecha, fechaActual, nombre, apellido1, apellido2, telefono, email, productos, mensaje, aprobado
FROM pedido
WHERE borrado = 0
ORDER BY -fecha";
$limit = 10;
$page = validatepage($mysqli,$cadenaSQL,$limit,$page);
$startpoint = ($page * $limit) - $limit;
$res= $mysqli->query($cadenaSQL." LIMIT {$startpoint} , {$limit}");
?>
Most of the code above comes from a php class with functions related to the database, so they are called from there.
It shows on a list with the following html-php code, relating almost every field of the database, posting it first on a column with the showed width and then making every line with the values from every entry:
<table class="table table-hover">
<thead>
<tr>
<th scope="col" style="width:8%" class="num-pedido">NºPedido</th>
<th scope="col" style="width:10%" class="fecha">Fecha</th>
<th scope="col" style="width:15%" class="nombre-completo">Nombre</th>
<th scope="col" style="width:12%" class="telefono">Teléfono</th>
<th scope="col" style="width:15%" class="email">Email</th>
<th scope="col" style="width:20%" class="productos">Productos</th>
<th scope="col" style="width:10%" class="aprobado">Aceptado</th>
<th scope="col" style="width:10%" class="accion">Acción</th>
</tr>
</thead>
<tbody>
<?php
while($row=mysqli_fetch_array($res)){
$idPedido = $row['idPedido'];
$id = "P".str_pad($idPedido, 8, "0", STR_PAD_LEFT);
$fecha = $row['fecha'];
$fechaActual = $row['fechaActual'];;
$nombre = $row['nombre'];
$apellido1 = $row['apellido1'];
$apellido2 = $row['apellido2'];
$telefono = $row['telefono'];
$email = $row['email'];
$productos = $row['productos'];
$aprobado = $row['aprobado'].'';
$mensaje = $row['mensaje'];
$nombrecompleto = $nombre." ".$apellido1." ".$apellido2;
?>
<tr class="tabla-fila" <?php if($aprobado==1){echo "style='background:#afd5a2'";}?>>
<td data-label="Nº Pedido">
<a>
<div class="num-pedido" ><div id="myModalBtn"><?=$id?></div></div>
</a>
</td>
<td data-label="Fecha">
<div class="fecha"><?=$fecha?></div>
</td>
<td data-label="Nombre">
<div class="nombre-completo-pedido"><?=$nombrecompleto?></div>
</td>
<td data-label="Telefono">
<div class="telefono"><?=$telefono?></div>
</td>
<td data-label="Email">
<div class="email-pedido"><?=$email?></div>
</td>
<td data-label="Productos">
<div class="productos"><?=$productos?></div>
</td>
<td data-label="Aceptado">
<div class="aprobado"><?php if($aprobado==0){
echo "NO";
}else{
echo "SI";
}?></div>
</td>
<td data-label="Acción">
<div class="accion">
<span class="ti-check" id='<?=$idPedido?>' data-id="<?= $idPedido ?>"></span>
<span class="ti-trash" id='<?=$idPedido?>' data-id='<?= $idPedido ?>'></span>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
The problem comes when I try to call the model with "myModalBtn" (I will post the code a few lines later), as it only shows the last entry of my database. Here is the code:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class=>
<button class="close">×</button>
</div>
<?php sectionbradcam('Detalles del pedido');?>
<section class="subcaja-central">
<div id = "central" class="container">
<div class="area-contenido">
<p><br>
Id Pedido: <?=$id?><br>
Fecha solicitada: <?=$fecha?><br>
Fecha de la solicitud: <?=$fechaActual?><br>
Nombre completo: <?=$nombrecompleto?><br>
Teléfono: <?=$telefono?><br>
Email: <?=$email?><br>
Productos: <?=$productos?><br>
Mensaje: <?=$mensaje?><br>
</p>
</div>
</div>
</section>
</div>
</div>
And also the json called to make the modal popup:
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myModalBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
How can I make it on every item of the list I mentioned above? And how would I point each lane of the list to it´s information on the database?
Thanks in advance to everyone who can help me.