title: For loop if statement confusion
body: <p>I have a JavaScript object literal array that I'm trying to create a simple for loop to pull in all the info. The problem is that I'm trying to use an If statement to close and reopen divs when there are more than 4 books in a row. But when there are more than 4 books it adds these divs to every instance of the book object, creating a row for every item. I just can't for the life of me think what the correct condition is that will only close an reopen the divs every 4 books.</p>
  
  <pre><code>    var bookInfo = '';
      var book;
  
  
     function print(bookInfo) {
       var outputDiv = document.getElementById('books-go-here');
       outputDiv.innerHTML = bookInfo;
     }
  
      for(var i = 0; i &lt; books.length; i += 1){
       book = books[i];
       bookInfo += '&lt;div class="large-3 small-6 columns output"&gt;';
       bookInfo += '&lt;img src="' + book.image + '"/&gt;';
       bookInfo += '&lt;div class="panel"&gt;';
       bookInfo += '&lt;h2&gt;' + book.name + '&lt;/h2&gt;';
       bookInfo += '&lt;p&gt;' + book.description + '&lt;/p&gt;';
       bookInfo += '&lt;/div&gt;';
       bookInfo += '&lt;/div&gt;';
       // return bookInfo;
        if (books.length &gt; 4) {
           bookInfo += '&lt;/div&gt;"';
           bookInfo += '&lt;/div&gt;"';
           bookInfo += '&lt;/div&gt;"';
           bookInfo += '&lt;div class="row"&gt;';
           bookInfo += '&lt;div class="large-12 columns"&gt;';
           bookInfo += '&lt;div id="books-go-here" class="row"&gt;';
         }
  
       }
     print(bookInfo);
  </code></pre>
  
  <p>Any help is greatly appreciated as this is truly pickling my brain at the moment.</p>