HTML模式的问题，不显示

Question

I had some troubles with some HTML modals. I made a query from a database and I want the result to be displayed with a modal in the front end.

Everything is good in the beginning when only the ID should be displayed in a button. But when I click on one, only the first one in the row opens, the rest of them are not corresponding.

As I know, when you want to show some more information about a specific ID, as in my situation couple more columns, that is possible with anchors <a> where the preferable information can be displayed through a new .php file and is selected from the others by the link.

Is there any way that I can do the same, maybe by specifying the ID in every button, then the right modal with the right information pops up?

Here is the code:

<?php while($row = mysqli_fetch_array($show)): ?> 
    <button>
        <h2>ID:</h2>
        <span>
            <?php echo $row['id']; ?>
        </span> 
    </button>

    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span> 
            <h2>ΙD:</h2> 
            <span>
                <?php echo $row['id']; ?>
            </span> 
        </div> 

        <div class="modal-body"> 
            <ul> 
                <li>
                    <span>
                        <?php echo $row['name']; ?>
                    </span>
                </li> 
            </ul> 
        </div> 

        <div class="modal-footer">
            <?php echo $row['number']; ?>
        </div>
    </div> 
<?php endwhile; ?>

And the code for opening the modals:

var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 1

I think if you are using Bootstrap, you can use these codes below

For the button to open modal:

<button class="btn btn-success" data-toggle="modal" data-target="#try">Open Modal</button>

Inside of the modal:

<div class="modal fade" id="try" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <form id="form">
            <div class="row mt-4">
                <div class="col-1"></div>
                <div class="col-10">
                    <h3>Hi</h3>
                </div>
                <div class="col-1">
                    <button type="button" class="close mr-4" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div></div>