I've been grappling with the idea of creating a function that can display and hide a comment field when a button is clicked. The challenge here is that there are multiple line items with their own comment boxes. I want to find a way to achieve this without dynamically generating IDs for each comment box based on the number of items pulled from a MySQL database.
Below is a snippet of the code:
<tr>
<td>1</td>
<!-- Line Item # -->
<td>Foundation</td>
<!-- Name -->
<td>1</td>
<!-- QTY -->
<td>$50</td>
<!-- Price -->
<td>$50</td>
<td>
<button class="btn btn-default" type="button" id="OpenImgUpload">Upload Packet</button>
<br/>
<button class="btn btn-default" type="button" id="addNotes">Add Notes</button>
<input type="file" id="upload1" name="upload" multiple />
</td>
<td align="center">
<button type="button" class="btn btn-md btn-primary" id="submitbutton">Submit Item</button>
</td>
<tr>
<td colspan="7">
<div class="col-sm-12 col-md-12" style="display:none;" id="notes">
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</td>
</tr>
</tr>
Imagine there are multiple instances of this code snippet on a page, one for each line item. How can I use jQuery to toggle the nested table row containing the comment box related to the corresponding line item?
Currently, this is the placeholder function I've come up with:
function hide(){
$('#notes').toggle();
};
Any guidance is appreciated. Thank you!