When someone clicks on the Download button in my table, I want to pass the date values from that particular row to a function. Currently I can only pass the date values from the first table row.

This is the selector I'm using:

$(this).parent().find('#period-start');

Which always returns:

[<td id=​period-start>​5/1/2013​</td>]

I've tried combinations of the parent, child, find and closest selectors, but haven't been able to stumble across the correct one to grab the date values from the current row. Thanks.

Table

<table id=tblStatements class=table>

            <thead>

                <tr>

                    <th>Period Starting</th>

                    <th>Period Ending</th>

                    <th>Download</th>

                </tr>

            </thead>

            <tbody>



<tr>

  <td id='period-start'>5/1/2013</td>

  <td id='period-end'>5/31/2013</td>

  <td><button type='submit'>Download</button></td>

</tr>



<tr>

  <td id='period-start'>4/1/2013</td>

  <td id='period-end'>4/30/2013</td>

  <td><button type='submit'>Download</button></td>

</tr>



<tr>

  <td id='period-start'>3/1/2013</td>

  <td id='period-end'>3/31/2013</td>

  <td><button type='submit'>Download</button></td>

</tr>



</tbody>

</table>