show/ hide td inside listview

See more:

ASP.NET

Javascript

jQuery

Hello Experts,

In a listview I have table contains [id, name, grade, age, notes]
notes field is displayed as a row and it's hidden by default.
I added new column called show/hide notes. in this column there's a link when the user clicks it will show or hide the notes row. so the table will look like this [id, name, grade, age,show notes, notes]
the td looks like this

<td colspan="4" style="display:none;" id="notesTd" class="showHideNotes">Notes</td>

the link looks like this :

<td style="text-align:center;vertical-align:middle;"><a href="#"><img src="img/notes1.png" class="wiringImg"  /></a></td>

Onclick of the anchor I have this JavaScript Code:

onclick="$('.showHideNotes').toggle();" 

The problem is If I use the class name in javaScript Code, it will show/hide all the notes of the table and If I use the Id of the td it will show/hide the first row only.
What I need to add to make the anchor show/hide the note of the row not all the rows.

I hope I well explained my problem.

Thank you