I have multiple table rows that has a set of radio buttons on each row (Approve & Reject). When I select Reject I want to display a hidden tr underneath it and I'm using jquery to insert HTML into the tr. When I select Approve the tr should be hidden once again.
I can't get it to work exactly how I explained it, when I toggle between the Approve & Reject radio buttons the hidden tr gets displayed on all the rows. I want it to only show underneath the radio button I clicked on.
My Fiddle: http://jsfiddle.net/4A7TD/
HTML:
<table>
<tr>
<td class="left">
<input type="radio" name="approval1" value="approve" /> APP
<input type="radio" name="approval1" value="reject" /> REJ
</td>
</tr>
<tr class="hiddenColumn">
</tr>
<tr>
<td class="left">
<input type="radio" name="approval2" value="approve" /> APP
<input type="radio" name="approval2" value="reject" /> REJ
</td>
</tr>
<tr class="hiddenColumn">
</tr>
</table>
JQuery:
$('.hiddenColumn').hide();
$('input[type=radio]').change(function() {
if ($(this).val() == 'reject') {
$('.hiddenColumn').show();
var showColumn = ($(this).closest('tr').next('tr'));
showColumn.html('<td class="left">*Reason for Rejection<br /><textarea class="width350" name="reasonForRejection"></textarea></td>');
} else if ($(this).val() == 'approve') {
($(this).closest('tr').next('tr')).hide();
};
});