title: Show contents of javascript arrays in buttons
body: <p>I have the following code. How do I make the contents of the array appear on the button? The arrays have a content of 0,1,2,3,4,5. I want the the buttons which are aligned vertically to be as follows:</p>
  
  <p>0<br>
  1<br>
  2<br>
  3<br>
  4<br>
  5</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var family = [0, 1, 2, 3, 4, 5];
  console.log(family);
  for (var prop in family) {
    document.getElementById('aaron-family').innerHTML += '&lt;div class=col&gt; &lt;button type="button" class="list-group-item"' + prop + '&lt;/button&gt;&lt;/div&gt;';
    console.log(prop);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
    width: 200px;
    height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;ul id="aaron-family"&gt;
        &lt;div class="list-group"&gt;&lt;/div&gt;
      &lt;/ul&gt;
      &lt;div class="col"&gt;
        1 of 3
      &lt;/div&gt;
      &lt;div class="col"&gt;
        j 1 of 3
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>