title: How to populate a table column-wise using arrays?
body: <p>As an example, I have 3 arrays with same length:</p>
  
  <pre class="lang-js prettyprint-override"><code>arrayOne = ['a', 'b', 'c']
  
  arrayTwo = ['d', 'e', 'f']
  
  arrayThree = ['g', 'h', 'i']
  </code></pre>
  
  <p>I wish to know if there is a way to populate a HTML5 table by columns using jQuery (<em>or even if this is the best practice for things like this</em>). So far, I've seen this <a href="https://stackoverflow.com/questions/34214811/populate-column-of-html-table-dynamically">post</a>. </p>
  
  <p>This <a href="https://stackoverflow.com/questions/48605702/html-how-to-add-data-to-a-table-in-column-wise-using-jquery/48606107">post</a> came very close to answering my question but it doesn't use arrays. </p>
  
  <p>The ideal solution would be to populate the table by having the number of rows same as the length of any of the arrays. (Users will be able to choose the length of the array(s), therefore, the number of rows... I think I got carried away).</p>
  
  <p>For example:</p>
  
  <p><strong>Before</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table class="table"&gt;
      &lt;thead class="thead-dark"&gt;
         &lt;tr&gt;
            &lt;th scope="col"&gt;First Column&lt;/th&gt;
            &lt;th scope="col"&gt;Second Column&lt;/th&gt;
            &lt;th scope="col"&gt;Third Column&lt;/th&gt;
         &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody id="table-content"&gt;
       &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Expected Output</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table class="table"&gt;
      &lt;thead class="thead-dark"&gt;
         &lt;tr&gt;
            &lt;th scope="col"&gt;First Column&lt;/th&gt;
            &lt;th scope="col"&gt;Second Column&lt;/th&gt;
            &lt;th scope="col"&gt;Third Column&lt;/th&gt;
         &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody id="table-content"&gt;
         &lt;tr&gt;
           &lt;td&gt;a&lt;/td&gt;
           &lt;td&gt;d&lt;/td&gt;
           &lt;td&gt;g&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
            &lt;td&gt;b&lt;/td&gt;
            &lt;td&gt;e&lt;/td&gt;
            &lt;td&gt;h&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
            &lt;td&gt;c&lt;/td&gt;
            &lt;td&gt;f&lt;/td&gt;
            &lt;td&gt;i&lt;/td&gt;
         &lt;/tr&gt;
       &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The code I've tried was able to populate one of the columns, but I can't get any further.</p>
  
  <pre class="lang-js prettyprint-override"><code>const columnOne = arrayOne.map(p =&gt; {
       const rowItem = $('&lt;td&gt;').html(p)
       return $('&lt;tr&gt;').append(rowItem)
             })
  $('#table-content').append(columnOne)
  </code></pre>