Using PHP inside of CSS and JavaScript

Im trying to have a text line popup once the comment button is clicked for each line(row) dynamically.

When you click on the comment button, a line should popup under the buttons within the same row.

On DOM inspect, the lines and buttons all have unique names and id’s

I just cant get it to work as a unique event for each row.

Here is an image for reference

<div class="container-xxl flex-grow-1 container-p-y">
             
<h2 align="center"><?php echo $appname?></h2><br />
   <div class="form-group">
   <form name="add_name" id="add_name">
                    
   <div class="table-responsive">
      <table class="table table-bordered" id="dynamic_field">
         <?php while ($checks = mysqli_fetch_array($checksqry)) {
            echo '<tr>';
            echo '<td style="width: 20%">'.$checks['check_name'].' <br><br> 
            <input type="radio" class="btn-check" name="btn[' . $checks['id'] . ']" id="btnpass[' . $checks['id'] . ']" value="Pass">
            <label class="btn rounded-pill btn-outline-success" for="btnpass[' . $checks['id'] . ']">Pass</label>&Tab;&Tab;
                    
           <input type="radio" class="btn-check" name="btn[' . $checks['id'] . ']" id="btnwarning[' . $checks['id'] . ']" value="Warning">
           <label class="btn rounded-pill btn-outline-warning" for="btnwarning[' . $checks['id'] . ']">Warning</label>&Tab;&Tab;
                    
           <input type="radio" class="btn-check" name="btn[' . $checks['id'] . ']" id="btnfail[' . $checks['id'] . ']" value="Fail">
           <label class="btn rounded-pill btn-outline-danger" for="btnfail[' . $checks['id'] . ']">Fail</label>&Tab;&Tab;
                    
           <button onclick="myFunction()" type="button" name="comment[' . $checks['id'] . ']" id="comment[' . $checks['id'] . ']" class="btn btn-info" style="float: right"><img src="assets/comment.png" width="20px"></button> 
<br><br>
           <div id="commentlinediv[' . $checks['id'] . ']">
           <input type="text" class="text-line" placeholder="Type Comment Here" id="commentline[' . $checks['id'] . ']"/>
</div>
</td>';
echo '<tr>';}?>
                        
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>

input[type="text"] {
   border:none; /* Get rid of the browser's styling */
   border-bottom:1px solid black; /* Add your own border */
}

.text-line {
   background-color: transparent;
   color: black;
   outline: none;
   outline-style: none;
   border-top: none;
   border-left: none;
   border-right: none;
   border-bottom: solid #eeeeee 1px;
   padding: 3px 10px;
   width: 300px;
}
                
#commentlinediv[<?php echo $checks['id']?>]{
   display: none;
}

function myFunction() {
document.getElementById("commentlinediv[<?php $checks['id']?>]").style.display = "inline";
}