title: How to display hidden table rows with radio buttons using JQuery
body: <p>I have multiple table rows that has a set of radio buttons on each row (Approve &amp; 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.</p>
  
  <p>I can't get it to work exactly how I explained it, when I toggle between the Approve &amp; 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.</p>
  
  <p>My Fiddle: <a href="http://jsfiddle.net/4A7TD/" rel="nofollow">http://jsfiddle.net/4A7TD/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td class="left"&gt;
          &lt;input type="radio" name="approval1" value="approve" /&gt; APP &amp;nbsp; 
          &lt;input type="radio" name="approval1" value="reject" /&gt; REJ
      &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr class="hiddenColumn"&gt;
  
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td class="left"&gt;
          &lt;input type="radio" name="approval2" value="approve" /&gt; APP &amp;nbsp;
          &lt;input type="radio" name="approval2" value="reject" /&gt; REJ
      &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr class="hiddenColumn"&gt;
  
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>    $('.hiddenColumn').hide();
  
      $('input[type=radio]').change(function() {
       if ($(this).val() == 'reject') {
         $('.hiddenColumn').show();
         var showColumn = ($(this).closest('tr').next('tr'));
         showColumn.html('&lt;td class="left"&gt;*Reason for Rejection&lt;br /&gt;&lt;textarea class="width350" name="reasonForRejection"&gt;&lt;/textarea&gt;&lt;/td&gt;');
          } else if ($(this).val() == 'approve') {
              ($(this).closest('tr').next('tr')).hide();
         };
     });
  </code></pre>