Clone divs that appear in container
<p>I have created a game where a question is given and the user must click the correct number (div) in the container. </p>

<p>The divs animate from the bottom of the container to the top but the problem is, because the questions appear randomly you can sometimes have a long wait for the right answer to appear. </p>

<p>I want to solve this problem by increasing the amount of divs that move through the container but don't know how I would without doubling them in the HTML. </p>

<p>Is there a way I can clone() the divs once the program is run so that double the amount of divs are displayed each time?</p>

<p>I have tried this...</p>

<pre><code>$('#container').children().clone(true);
</code></pre>

<p>Here is the <code>divs</code> in the <code>HTML</code>.</p>

<pre><code>&lt;div id="container"&gt;
    &lt;div id="char1" class="character number" value="1"&gt;&lt;/div&gt;
    &lt;div id="char2" class="character number" value="2"&gt;&lt;/div&gt;
    &lt;div id="char3" class="character number" value="3"&gt;&lt;/div&gt;
    &lt;div id="char4" class="character number" value="4"&gt;&lt;/div&gt;
    &lt;div id="char5" class="character number" value="5"&gt;&lt;/div&gt;
    &lt;div id="char6" class="character number" value="6"&gt;&lt;/div&gt;
    &lt;div id="char7" class="character number" value="7"&gt;&lt;/div&gt;
    &lt;div id="char8" class="character number" value="8"&gt;&lt;/div&gt;
    &lt;div id="char9" class="character number" value="9"&gt;&lt;/div&gt;
    &lt;div id="char10" class="character number" value="10"&gt;&lt;/div&gt;
    &lt;div id="char11" class="character clock up"&gt;&lt;/div&gt;
    &lt;div id="char12" class="character clock down"&gt;&lt;/div&gt;
    &lt;div id="char13" class="character freeze"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is a <a href="http://codepen.io/anon/pen/czwgm" rel="nofollow">demo</a></p>
