PHP Js Only first row of the table can be use(button)

Im new at this and still confuse about my problem, so here is a table for my php

<table>
            <tr>
                <th align="center">ID</th>
                <th align="center">Project Name</th>
                <th align="center">Due Date</th>
                <th align="center">Sub Date</th>
                <th align="center">Comment</th>
                <th align="center">Status</th>
                <th align="center">Option</th>
            </tr>

            <tr>
            
            <?php
                
                while ($res2=mysqli_fetch_assoc($result2)) {

                    echo "<tr>";
                    echo "<td>".$res2['project_id']."</td>";
                    echo "<td>".$res2['project_name']."</td>";
                    echo "<td>".$res2['duedate']."</td>";
                    echo "<td>".$res2['subdate']."</td>";
                    echo "<td>"".$res2['comment'].""</td>";
                    echo "<td>".$res2['status']."</td>";
                    
                    //as you can see, id = myId
                    echo "<td><a href="#" id="myId" class="button">View</a>";
                }?>
                </td>
            </tr>
        </table>

supposedly when button next to each row is clicked, a popup window will appear but only the first row works, and the other buttons do nothing. I did search for this problem like 2 hours already, most of them talk about unique id, but how can I implement or fix for this problem.

Here is a script for this

        document.getElementById('myId').addEventListener("click", function () {
            document.querySelector('.bg-modal').style.display = "flex";
        });

I would really appreciate for your help, thanks a lot.

Answer

you can try:

[].slice.call(document.querySelectorAll('[id^="myId"]'))
.map(el => el.addEventListener("click", function () {
    document.querySelector('.bg-modal').style.display = "flex";
}));

and you should change your code:

 $i = 0;
 while ($res2=mysqli_fetch_assoc($result2)) {
     ......
     //as you can see, 
     echo "<td><a href="#" class="class-{++$i}" class="button">View</a>";
 }

now, js code:

[].slice.call(document.querySelectorAll('[class^="class-"]'))
.map(el => el.addEventListener("click", function () {
    document.querySelector('.bg-modal').style.display = "flex";
}));