I have a table for vehicle inspections. It has a pass, warning, fail button for each check(each row). It also has a comment button. I would like a text line to popup under the check in the same row once the comment button is clicked. I would also like to have the comment turn red if warning or fail is clicked as it would be required. Any tips would be greatly appreciated!
Click here to see my web app example
This is my current code for the table:
<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>		
<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>		
<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>		
<button 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> </td>';
echo '<tr>';}?>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
Ive tried this for my event listener, but not currently working:
document.getElementById ("comment[<?php echo $checks['id']?>]").addEventListener ("click", () => {
document.getElementById("commentline[<?php echo $checks['id']?>]").classList.toggle('showMe')
}, false);