title: Trying to pass array items to getElementById() select option in html form
body: <p>I have a dynamic radio option that triggers two different arrays to show in a drop down select.</p>
  
  <p><a href="https://jsfiddle.net/carvingpixel/5mcux28z/3/" rel="nofollow noreferrer">https://jsfiddle.net/carvingpixel/5mcux28z/3/</a></p>
  
  <pre><code>&lt;form name="frmRadio" id="radio-buttons" action=""&gt;
  &lt;input type="radio" id="radio-kits" name="option"   onclick="change(this)"&gt;Kits  
  &lt;input type="radio" id="radio-starLabs" name="option" onclick="change(this)"&gt;StarLabs
  &amp;nbsp;&amp;nbsp;
  &lt;select id="arrays"&gt;
  &lt;option id="items"&gt;&lt;/option&gt;
  &lt;/select&gt;    
  &lt;/form&gt;  
  
  &lt;script&gt;
      var kits = ["Lego WeDo", "Force &amp; Motion", "Bernoulli's Lift"];
      var starLabs = ["Constellations", "Starfields", "Moon"];
  
      function change(radio) {
          if (radio.checked &amp;&amp; radio.id === "radio-kits") {
  
              for (var i = 0; i &lt; kits.length; i++) {
                  document.getElementById("items").innerHTML = kits[i];
              }
          } else {
              for (var i = 0; i &lt; starLabs.length; i++) {
                  document.getElementById("items").innerHTML = starLabs[i];
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have most of it working but I am stuck on having each item of the array show in the list. Currently, it's showing the last item in the iteration rather than each item.</p>