title: How to add checkboxes with Javascript dynamically
body: <p>Trying to insert dynamic checkboxes and collection elements from Materializecss site to my html using <strong>document.createElement()</strong> (as many checkboxes as my names in a loop - each name should have own checkbox).</p>
  
  <p>My questions: </p>
  
  <p>1) It works with collections but <strong>checkboxes do not appear</strong> in my sidebar (see the code in the bottom).</p>
  
  <p>2) Do I need a <strong>different ID and For attributes</strong> for each checkbox?</p>
  
  <p>3) I want to use values gotten from checkboxes and correspondent names. For that I have to place names in a <code>&lt;span&gt;</code> tag of checkboxes here:</p>
  
  <pre><code>    &lt;label&gt;
      &lt;input type="checkbox" class="filled-in" checked="checked" /&gt;
      &lt;span&gt;Filled in&lt;/span&gt;
      &lt;/label&gt;
  </code></pre>
  
  <p>But I want to keep names in this Collection tags rather than in checkboxes tags because a) it looks great b) I want to have links on names in a way I have now.</p>
  
  <pre><code> &lt;div class="collection"&gt;
      &lt;a href="#!" class="collection-item"&gt;Alvin&lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The question is <strong>will I be able to read corresponding values from 2 different elements?</strong></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>             
              //collection element from Materializecss site
               var collection = document.getElementById("coll")
               
               //form element from Materializecss site
               var form = document.getElementById("form")
      
               for (var i = 0; i &lt; names.length; i++) {
      
                   //getting each name
                   var name = names[i]                     
                  
                   //creates a label tag for each checkbox
                   var newLabelTag = document.createElement("LABEL") 
                     
                   newLabelTag.setAttribute("for", "item"); 
                   
                   //add item to the mother collection element
                   form.appendChild(newLabelTag);
                   
                   
                   
                   //creates a span tag for each checkbox
                   var newSpanTag = document.createElement("SPAN")                  
                
                   // Add names to it
                   var Text = document.createTextNode(name);
                   
                   //new line
                   var br = document.createElement("BR");
                   
                   newSpanTag.appendChild(br);
                   
                   //append the text with names to the tag
                   newSpanTag.appendChild(Text);
                   
                   //add item to the mother collection element
                   form.appendChild(newSpanTag);
                   
                   
                   
                   //creating a new &lt;input&gt; tag
                   var newInputTag = document.createElement("INPUT") 
                   
                   //set a class to a new tag
                   newInputTag.setAttribute("class", "filled-in");
                   
                   newInputTag.setAttribute("id", "item");
                   
                   newInputTag.setAttribute("type", "checkbox");                 
                                
                   //add item to the mother collection element
                   form.appendChild(newInputTag);
                   
                   
                   
                   //creating a new &lt;a&gt; tag (Collection items)
                   var newATag = document.createElement("A") 
                   
                   //set a class to a new tag
                   newATag.setAttribute("class", "collection-item");
                   
                   // add the URL attribute
                   newATag.setAttribute("href", "https//blah");
                   
                   // Add names to it
                   var newText = document.createTextNode(name);
                   
                   //append the text with names to the tag
                   newATag.appendChild(newText);
                   
                   //add item to the mother collection element
                   collection.appendChild(newATag);
  
      }</code></pre>
  </div>
  </div>
  </p>