title: Create randomly generated divs that fill a box jQuery and Javascript
body: <p>I have a section on my website that is 100% wide and 450 pixels tall. </p>
  
  <p>My html looks like so...</p>
  
  <pre><code>&lt;section class="interactive-banner"&gt;
      &lt;figure&gt;&lt;/figure&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I want each 'figure' element to be 150 pixels wide and 150 pixels tall, I want to generate the 'figure' html automatically and randomly with jQuery, and to consist of some inner html. </p>
  
  <p>I have the following...</p>
  
  <pre><code>$(function(){
  
      var people = [
          { id: 1 },
          { id: 2 }
      ];
  
      var figure = $('figure');
      w = 1500;
      h = 450;
  
      var counter = 0;
      var data = people[Math.floor(Math.random()*people.length)];
  
      (function nextFade() {
          counter++;
          figure.clone().html(data.name).appendTo('.interactive-banner').hide().fadeIn(150, function() {
              if(counter &lt; 30) nextFade();
          });
      })();
  
  });
  </code></pre>
  
  <p>I want each figure element to fade in 1 after the other, in total I will only have 7 original figures, only these 7 will be randomly cloned until i have 30 iterations in total, I want the figure html to contain the data inside each object in my people array, so each figure is an object so to speak, output as so...</p>
  
  <pre><code>&lt;figure&gt;
      &lt;img src="[image src from object inside array]" /&gt;
      &lt;div class="information"&gt;
          &lt;h5&gt;[name from object inside of array ]&lt;/h5&gt;
          &lt;p&gt;[job title from object inside of array ]&lt;/p&gt;
      &lt;/div&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>only at the minute its being output as so...</p>
  
  <pre><code>&lt;figure style="display: block;"&gt;
      Chris
  &lt;/figure&gt;
  </code></pre>
  
  <p>Ive created an example here, as you see however each figure contains the same information... </p>
  
  <p><a href="http://jsfiddle.net/pGmeE/" rel="nofollow">http://jsfiddle.net/pGmeE/</a></p>