Transverse through LI to collect checked boxes group by UL using jquery
<p>I have a primary product array</p>

<pre><code>var prodArr = new Array('Microsoft', 'Google');
</code></pre>

<p>Using prodArr as the primary loop, I created a UL LI checkboxtree which looks as follows:</p>

<pre><code>&lt;ul id="prodTree"&gt;
  &lt;li&gt;
    &lt;input name="prod" id="prod" type="checkbox" value="Microsoft"&gt;
    &lt;label&gt;Microsoft&lt;/label&gt;
    &lt;ul id="MicrosoftTree"&gt;
      &lt;li&gt;
          &lt;input id="prod" name="prod" type="checkbox" value="msp1"&gt;
          &lt;label&gt;Microsoft Product 1&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input id="prod" name="prod" type="checkbox" value="msp2"&gt;
          &lt;label&gt;Microsoft Product 2&lt;/label&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;li&gt;
    &lt;input name="prod" id="prod" type="checkbox" value="Google"&gt;
    &lt;label&gt;Google&lt;/label&gt;
    &lt;ul id="GoogleTree"&gt;
      &lt;li&gt;
          &lt;input id="prod" name="prod" type="checkbox" value="gp1"&gt;
          &lt;label&gt;Google Product 1&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input id="prod" name="prod" type="checkbox" value="gp2"&gt;
          &lt;label&gt;Google Product 2&lt;/label&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
&lt;/ul&gt;
</code></pre>

<p>On click of a button, I want to use prodArr and loop through every UL and group all the checkbox checked and create a textbox out of it. Lets assume 'msp1', 'msp2' and 'msp9' Microsoft products were selected. Example:</p>

<pre><code>&lt;input type='text' id='Microsoft' value='msp1, msp2, msp9' /&gt;
</code></pre>

<p>I have tried. Please help.</p>
