Jquery and clone html sections?
<p>I have this template <code>div</code></p>

<pre><code>&lt;div class="divDetails"&gt;
    &lt;div class="divRowData" style="display: none "&gt; 
          &lt;span class="spanColor"&gt;&lt;/span&gt;
          &lt;span class="spanText"&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>It is hidden.</p>

<p>I have an object array and I need to duplicate <code>divRowData</code> with the injected data from array. ( and make each new section visible ).</p>

<p>But it seems my jquery code is a bit of a mess and I'm looking for a shorter way of doing it.</p>

<p>Currently I do : </p>

<pre><code> for (var i = 0; i &lt; arrData.length; i++)
           {
               var thediv = $(".divDetails&gt;.divRowData:first").clone().css('display','block');
               var g = thediv.find(".spanColor").css('background-color', 'color'+i);
               var g = thediv.find(".spanText").text(arrData[i].text);
               thediv.appendTo(".divDetails");

           }
</code></pre>

<p>How can I shorten this code ? </p>

<p><a href="http://jsbin.com/etudak/1/edit" rel="nofollow">http://jsbin.com/etudak/1/edit</a></p>

<p><sub>I know I can use templates but that's another story.</sub></p>
