title: Append to HTML Table using Javascript with Data-elements
body: <p>I have four arrays</p>
  
  <pre><code>arrayOne['orange','blue','green','red','yellow','purple','gray','tan','pink','violet']
  arrayTwo['1001','1003','3453','78934','2389','3','8934']
  arrayThree['TV','phone','laptop']
  arrayFour['1','2','3','4','5','6','7','8','9','10']
  </code></pre>
  
  <p>I am making a table in html </p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Column 1&lt;/th&gt;
        &lt;th&gt;Column 2&lt;/th&gt;
        &lt;th&gt;Column 3&lt;/th&gt;
        &lt;th&gt;Column 4&lt;/th&gt;
     &lt;/tr&gt;
  &lt;/thead&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have a script that opens a modal and appends to the table I have tried to get it working for two columns but it is only populating the first column with ArrayOne contents</p>
  
  <pre><code>for (row = 0; row &lt;$(this).data("arrayOne").length; row++ ){
    $("#myModal").find(".table").append("&lt;tr&gt;
    &lt;td&gt;"+$(this).data("arrayOne")[row]+"&lt;/td&gt;"); 
  
    for (j = 0; j &lt;$(this).data("arrayTwo").length; j++ ){
      $("#myModal").find(".table").append("&lt;tr&gt;
      &lt;td&gt;"+$(this).data("arrayTwo")[j]+"&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;");
    } 
  } 
  </code></pre>
  
  <p>With the code above it only prints out as</p>
  
  <pre><code>column1    column2    column 3    column 4
  orange
  blue
  green
  red
  ....
  violet
  </code></pre>
  
  <p>The end result should look something like this</p>
  
  <pre><code>column1    column2    column 3    column 4
  orange     1001       TV          1
  blue       1003       phone       2
  green      3453       laptop      3
  red        78934                  4
  yellow     2389                   5
  </code></pre>
  
  <p>Etc, Etc</p>