如何在行

Question

我的项目有下一个问题。 在行上，我希望模式在您单击按钮时弹出它们。 现在它在第一行工作正常，但其他行不起作用。 我不知道如何解决这个问题，也许你可以帮助我？

<h1>Friendlist</h1>
<p class="options"><a href="create.php">create</a></p>
<table>
    <thead>
        <tr>
            <th>Gender</th>
            <th>Name</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    </tbody>

<?php
foreach($friend as $friends):
?>

<tr>
            <td><?=$friends['gender']?></td>
            <td><?=$friends['name']?></td>
            <td class="center"><button id="myBtn">+</button></td>
            <td class="center"><a href="delete.php?id=<?=$friend['id']?>">delete</a></td>
        </tr>

<?php
endforeach;
?>

/tbody>
</table>

<div id="myModal" class="modal">
    <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
</div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// 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";
    }
}