How to add checkboxes with Javascript dynamically

Trying to insert dynamic checkboxes and collection elements from Materializecss site to my html using document.createElement() (as many checkboxes as my names in a loop - each name should have own checkbox).

My questions:

1) It works with collections but checkboxes do not appear in my sidebar.

2) Do I need a different ID and For attributes for each checkbox?

3) I want to use values gotten from checkboxes and correspondent names. For that I have to place names in a <span> tag of checkboxes here:

    <label>
    <input type="checkbox" class="filled-in" checked="checked" />
    <span>Filled in</span>
    </label>

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.

 <div class="collection">
    <a href="#!" class="collection-item">Alvin</a>
  </div>

The question is will I be able to read corresponding values from 2 different elements?

             
            //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 < 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 <input> 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 <a> 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);

    }