Get a modal from cards looping php (while loop) - php

Question

I am trying to populate modals with data from mysql database, relating to the card that the user clicks on. The cards are generated by while loop - example below.
Right now my modal only shows the data relating to the first row of the database, no matter which card you click on. What is the easiest why to tie the card data to the modal?
<?php
$result = $conn->query($query);
if (!$result){
echo $conn->error;
}else{
while($row = $result->fetch_assoc()){
if ($row["size"]=='XLarge'){
echo "<div class='col-4 col padding-small'>
<div class='card' style='width: 100%'>
<div class='card-body'>
<h4 class='mybreed'>{$row["breed"]}</h4>
<h5 class='card-subtitle'>Category: {$row["category"]}</h5>
<div class='row flex-spaces child-borders'>
<label class='paper-btn margin' for='modal-2' onclick='modal-2'>Learn about me!</label>
</div>
<img class='image-bottom' style='width: 100%' src='{$row["image"]}'
alt='No image available'>
</div>
</div>
</div>";
echo "<input class='modal-state' id='modal-2' type='checkbox'>
<div class='modal'>
<label class='modal-bg' for='modal-2'></label>
<div class='modal-body'>
<label class='btn-close' for='modal-2'>X</label>
<h4 class='modal-title'>Factfile: {$row["breed"]}</h4>
<p class='modal-text'>
<table>
<tbody>
<tr>
<td>Category:</td>
<td>{$row["category"]}</td>
</tr>
<tr>
<td>Intelligence:</td>
<td>{$row["intelligence_category"]}</td>
</tr>
<tr>
<td>Intelligence Rank:</td>
<td># {$row["intelligence_rank"]}</td>
</tr>
<tr>
<td>Average Lifespan:</td>
<td>{$row["average_lifespan"]} years</td>
</tr>
<tr>
<td>Average Shoulder Height & Weight:</td>
<td>{$row["shoulder_height_cm"]} cm / {$row["weight_kg"]} kg</td>
</tr>
<tr>
<td>Suitability for children:</td>
<td>{$row["suitability_for_children"]}</td>
</tr>
<tr>
<td>Known Health Problems:</td>
<td>{$row["genetic_diseases"]}</td>
</tr>
<tr>
<td>Cost of Ownership:</td>
<td>{$row["price_bracket"]}</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>";
}
}
}
$result->close();
?>