title: Append tags based on CLASS to an specific ID container
body: <p>I'm a designer with HTML/CSS knowledge, but I'm new to jQuery.</p>
  
  <p>I've managed to make a simple accordion work, but I need help populating it with content from a database.
  I have a list of items with a group assigned to them, and I need to make a tab for each group.</p>
  
  <p>I used the group's name in the database as an ID for the container and as a class for each item in order to "link" them.
  I made a demo work like this:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="accordion"&gt;
    &lt;h3&gt;GROUP 1&lt;/h3&gt;
    &lt;div class="gr" id="group1"&gt;
      &lt;ul&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;h3&gt;GROUP 2&lt;/h3&gt;
    &lt;div class="gr" id="group2"&gt;
      &lt;ul&gt;&lt;/ul&gt;     
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ul&gt;
    &lt;li class="group1"&gt;Item A&lt;/li&gt;
    &lt;li class="group2"&gt;Item B&lt;/li&gt;
    &lt;li class="group1"&gt;Item C&lt;/li&gt;
    &lt;li class="group2"&gt;Item D&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function(){
      $(".group1").appendTo($("#group1 ul"));
      $(".group2").appendTo($("#group2 ul"));
  });
  </code></pre>
  
  <p>How could I achieve the same result for an undefined number of items and groups with unknown names?</p>
  
  <p>Thanks a lot!!</p>