Question

I am using smarty and creating a dynamic html table that has radio buttons for each selection. When I select a radio button, I would like a hidden row (with a comments text area) to show beneath the what I had just selected as that radio button.
When I run the following code, it will show a rows beneath every radio button, instead of the one i just selected:

Smarty radio buttons:

<tr>
  <td>
    <input 
       type="radio" 
       name="refund_selected" 
       id="refund_selected" 
       value="{smartydynamictag}" />
  </td>
</tr>

Hidden row of comments:

<tr id="refund_comments" style="display: none;">
  <th colspan="6">Test Here</th>
</tr>

My jQuery:

$("input[name=refund_selected]").click(function() { 
    if ($("input[name=refund_selected]").attr('checked')) {
        $("tr#refund_comments").show(); 
    }
});

Answer 1

I’m making an educated guess here as to how your markup is organized, but this may work:

$("input[name=refund_selected]").click(function() { 
        if ($("input[name=refund_selected]").attr('checked')) {
            $(this).parent().parent().next('#refund_comments').show(); 
        }
});

Also, do you have multiple of the same ID? Because the above code modification shouldn’t even be necessary; you’re not allowed to duplicate IDs.