单击时如何更改特定单元格的文本？

Question

<tr>
<div id=tableHead>
<th>Poster</th>
<th style="padding-left: 70px;">Destination</th>
<th style="padding-left: 10px;">Takeoff time</th>
<th style="padding-left: 10px; "># of passenger</th>
<th style="padding-left: 35px; ">Post time</th> 
</div>
</tr>


<?php session_start() ; 
    include 'databaseConnection.php' ;
    $sqlCommand3 = "SELECT * FROM posts ;" ;
            $result3 = mysqli_query($conn , $sqlCommand3);
            $resultCheck = mysqli_num_rows($result3);
            while ($row = mysqli_fetch_array($result3)) { ?>
        <tr>
            <td style="padding-left: 10px;"> <?php echo $row['poster']; ?></td>
            <td style="padding-left: 45px;"><?php echo $row['post_destination']; ?></td>
            <td style="padding-left: 30px;"><?php echo $row['post_readyTime']; ?></td>

            <td style="padding-left: 45px;"> <?php  echo $row['post_numberOfPassenger'];   


            ?></td>
            <td style="padding-left: 32px;"><?php echo $row['post_submitTime']; ?></td>


            <td id=joinRow>
                <a href="riderPage.php?edit=<?php echo $row['post_id']; ?>" class="edit_btn " id = "<?php echo $row['post_id']; ?>">Join</a>

            </td>



            <td>
                <a href="riderPage.php?del=<?php echo $row['post_id']; ?>" class="del_btn" id="<?php echo $row['post_id']; ?>">Delete</a>

            </td>

        </tr>
    <?php } ?>



</table>

<script>

var x = document.getElementsByClassName('edit_btn');

    for (var i = 0; i < x.length; i++) {
        x[i].addEventListener("click" , function(){
    x[i].innerHTML = "Joined";
});
    }
</script>   

每当单击（特定单元格的）“联接”时，我想将“联接”的文本更改为“（特定单元格的）联接”。 这是我的源代码，但是不起作用。 这段代码有什么问题？ 怎么解决呢？ 非常感谢 ：）