Wrap few elements and their child elements in side a  tag . JQuery
<p>I am trying to wrap dynamically generated elements and their child elements inside a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> tag  so that I can hide/show as per the requirement.</p>

<pre><code>&lt;tr&gt;
  &lt;td class="SubHeader1" colspan="3" rowspan="1"&gt;For those drivers:&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
  &lt;td class="TextBold" align="left" valign="middle"&gt;16.&lt;/td&gt;
  &lt;td class="TextBold" align="left" valign="middle"&gt;Text for Question 16:&lt;/td&gt;
  &lt;td class="TextBold" align="left" valign="middle"&gt;
   &lt;input name="ctl00$DefaultContent$ctl15" type="text" class="TextNormal" style="width:36px;" /&gt;      
  &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
   &lt;td class="TextBold" align="left" valign="middle"&gt;17.&lt;/td&gt;
   &lt;td class="TextBold" align="left" valign="middle"&gt;Content for Question 17:&lt;/td&gt;
   &lt;td class="TextBold" align="left" valign="middle"&gt;
     &lt;input name="ctl00$DefaultContent$ctl16" type="text" class="TextNormal" style="width:36px;" /&gt;
   &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>There are only two <strong>class=SubHeader1</strong> in the entire page and I want to wrap the <strong>second</strong> <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> containing the "<strong>SubHeader1</strong>" and also the following two <code>&lt;tr&gt;</code>s.</p>

<p>Here is what I was able to come up with seems not working.</p>

<pre><code>$('.SubHeader1:eq(1)').parent().each(function () {
            $(this).add($(this).next()).wrapAll('&lt;div class="HideShow"&gt;&lt;/div&gt;');
  })
</code></pre>

<p>Thank in advance</p>

<p>BB</p>
