title: How do I clone and append multiple elements in place with jQuery?
body: <p>What is a simple way to duplicate every element in a class as a sibling?  For example, it should change this HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt; 
          &lt;h1&gt; Foos &lt;/h1&gt;
          &lt;span class='duplicate-me'&gt; foo &lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h1&gt; Bars &lt;/h1&gt; 
          &lt;span class='duplicate-me'&gt; bar &lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>into:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt; 
          &lt;h1&gt; Foos &lt;/h1&gt;
          &lt;span class='duplicate-me'&gt; foo &lt;/span&gt;
          &lt;span class='duplicate-me'&gt; foo &lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h1&gt; Bars &lt;/h1&gt; 
          &lt;span class='duplicate-me'&gt; bar &lt;/span&gt;
          &lt;span class='duplicate-me'&gt; bar &lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks</p>