从循环 php 的卡片中获取模态（while 循环）

Question

我试图用来自 mysql 数据库的数据填充模态，与用户点击的卡片有关。卡片由 while 循环生成 - 示例如下。

现在我的模态只显示与数据库第一行相关的数据，不管你点击哪张卡片。将卡片数据绑定到模态最简单的原因是什么？

<?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(); 
?>