title: Populate table from array using JQuery
body: <p>I have an array of 16 elements that I want to fill a table. I want it to have 2 rows with 8 cells in each row which is filled with the array. My problem is that when the table is populated, the table populates all elements into one row. I have not had much experience with JQuery and I want to try to get this to work. Any help is appreciated! Here is my code:</p>
  
  <pre><code>//**********Javascript &amp; JQuery**********
  var array = [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8];
  var count = 0;
  var totalCells = 8;
  
  function writeTable() {
      var $table = $('#summaryOfResults');
  
      //Array always includes enough elements to fill an entire row, which is 8 cells. Outer loop determines how many rows to make.
      //Inner loop determines the elements to print in the cells for that row.
      for (var i = 0; i &lt; array.length / 8; i++) {
          $table.find('#body').append('&lt;tr&gt;');
          for (var j = 0; j &lt; totalCells; j++) {
              $table.append('&lt;td&gt;' + array[count] + '&lt;/td&gt;');
              count++;
          }
          $table.append('&lt;/tr&gt;');
      }
  }
  
  //**********HTML**********
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="resultsTable"&gt;
      &lt;table id='summaryOfResults' border='1'&gt;
          &lt;tbody id="body"&gt;
              &lt;tr&gt;
                  &lt;th&gt;#&lt;/th&gt;
                  &lt;th&gt;n&lt;sub&gt;i&lt;/sub&gt;&lt;/th&gt;
                  &lt;th&gt;n&lt;sub&gt;f&lt;/sub&gt;&lt;/th&gt;
                  &lt;th&gt;E&lt;sub&gt;i&lt;/sub&gt; (J)&lt;/th&gt;
                  &lt;th&gt;E&lt;sub&gt;f&lt;/sub&gt; (J)&lt;/th&gt;
                  &lt;th&gt;&amp;Delta;E (J)&lt;/th&gt;
                  &lt;th&gt;&amp;Delta;E (kJ/mol)&lt;/th&gt;
                  &lt;th&gt;&amp;lambda; (nm)&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="tableButtons"&gt;
      &lt;button id='copyButton' onclick=''&gt;Copy Table&lt;/button&gt;
      &lt;button id='clear' onclick='clearTable();'&gt;Clear Table&lt;/button&gt;
      &lt;button id='write' onclick='writeTable();'&gt;Write Table&lt;/button&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>