title: Adding multiple rows in one loop in jquery
body: <p>I have an array with a (hypothetically) unknown number of elements. I say hypothetically since I can count them, but it could change and I don't want to have to keep editing code through the years based on that. I want the code to be able to handle any number of items.</p>
  
  <p>I want to output these items in a table. So, I create the table:</p>
  
  <pre><code>var tbl = $.parseHTML('&lt;table&gt;');
  </code></pre>
  
  <p>Now, I want to make rows of 5 items each in this table. So I start, before the .each, by starting the first row:</p>
  
  <pre><code>var row = $.parseHTML('&lt;tr&gt;');
  </code></pre>
  
  <p>Then I start the loop:</p>
  
  <pre><code>$.each(myArray, function(index, value){
  
      // Create cell
      var cell = $.parseHTML('&lt;td&gt;');
  
  (...fill the cell....)
  
      // Insert the cell into the row
      $(row).append(cell);
  </code></pre>
  
  <p>Here's where it gets tricky. I want to end the row and start a new row once I've created 5 cells...</p>
  
  <pre><code>    if((index + 1) % 5 == 0){
          $(tbl).append(row);
  </code></pre>
  
  <p>Right here, I need to start a new row. However, if I call it "row" again, it just adds to the currently existing row. If I try to reset it, it either deletes everything or crashes, depending on how I do it.  How do I make it start a new row that will allow the looping above this to work for each subsequent row?</p>
  
  <p>(The rest of the code...)</p>
  
  <pre><code>    }
      // Add final row if necessary
      if(((index + 1) == $(myArray).length) &amp;&amp; ((index + 1) % 5 != 0)){
          $(tbl).append(row);
      }
  
  });
  </code></pre>
  
  <p>Hopefully, I've explained this well enough.</p>
  
  <p>Thanks!</p>