title: Separate array information into each div
body: <p>I have an array of information to place in differents divs.
  The construction of my divs is ok but all of the information is loaded into the first div.</p>
  
  <p>How can I place each array item into the respective divs?</p>
  
  <p>See my JavaScript code below:</p>
  
  <pre><code>$(document).ready(function() {
  
  var works = {
  
    facebook : {
      image : 'facebook.png',
      description : 'Description One.',
      website : 'http://www.facebook.com'
    },// End facebook
    google : {
      image : 'google.png',
      description : 'Description Two.',
      website : 'http://www.google.com'
    },// End google
    adobe : {
      image : 'adobe.png',
      description : 'Description Three.',
      website : 'http://www.adobe.com'
    }// End adobe
  
  };// End var works
  
  for ( var i in works ){
  
  // Construct the tree of div
  $('&lt;div/&gt;', {
      'id' : 'workId' + i,
      'class' : 'work'
  }).appendTo("#workListId");
  
  $('&lt;div/&gt;', {
      'id' : 'workFlipId' + i,
      'class' : 'workFlip'
  }).appendTo("#workId" + i);
  
  $('&lt;div/&gt;', {
      'id' : 'workDataId' + i,
      'class' : 'workData'
  }).appendTo("#workId" + i);
  
  $('&lt;div/&gt;', {
      'id' : 'workDescriptionId' + i,
      'class' : 'workDescription'
  }).appendTo("#workDataId" + i);
  
  $('&lt;div/&gt;', {
      'id' : 'workURLId' + i,
      'class' : 'workURL'
  }).appendTo("#workDataId" + i);
  
  // Insert the content in each div
  var pathBegin = '&lt;img src="img/works/';
  var pathEnd = '"/&gt;';
  
  $("#workFlipId" + i).html(pathBegin + works[i].image + pathEnd);
  $("#workDescriptionId" + i).html('&lt;p&gt;' + works[i].description + '&lt;/p&gt;');
  $("#workURLId" + i).html('&lt;a href="' + works[i].website + '"&gt;Read more...&lt;/a&gt;');
  
  }//End for
  
  $(".work").bind("click",function(){
  
      var $this = $(this);
  
      if($this.data('flipped'))
      {
          $this.revertFlip();
          $this.data('flipped',false)
      }// End if
  
      else
      {
          $this.flip({
              direction:'lr',
              color: '#454545',
              speed: 200,
              //content: $('.workData').html(),
  
              onBefore: function(){
  
                  $this.html($this.siblings('.workData').html());
              }
  
          });// End $this.flip
  
          $this.data('flipped',true);
  
      }// End else
  });//End function
  
  }); // End Function
  </code></pre>