jQuery: clone HTML with information from an array
<p>I have the following HTML that I want to repeat 5 times within a div container (.container). </p>

<pre><code>&lt;div class="block"&gt;
   &lt;div class="name"&gt;Name&lt;/div&gt;
   &lt;div class="content&gt;Content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Using jQuery/JS, I want to create an array (or some other kind of organization structure), that when run through a for loop could CHANGE the 'Name' and 'Content' of each block.</p>

<p>For example, I have two arrays:</p>

<pre><code>var names = ["Joe","Jane","Bill","Nicole","Dennis"];
var content = ["First content","Second content","Third content","Fourth content","Fifth content"]
</code></pre>

<p>I want to clone the top HTML and for each block, change the name and content to its respective array item. How can I do this?</p>

<p>Right now, I have the code to just repeat the HTML.</p>

<pre><code>var row = $('.block');

for(var i = 0; i &lt; 5; i++ )
  $('.container').append(row.clone())
}
</code></pre>

<p>Edit: Is there a better way to do this without creating multiple arrays?</p>
