How to add checkboxes with Javascript dynamically

Question

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 (see the code in the bottom).

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);

    }

Answer 1

I mostly fixed it. Removed all that long lines for creating checkboxes and replaced it with just a few lines where I cloned the original element:

             //cloning the original checkbox, true for cloning child tags
             var checkbox = document.getElementById("check").cloneNode(true)

             //setting unique IDs
             checkbox.setAttribute("id", "check" + i);

             //appending it to the form
             collection.appendChild(checkbox);


             //after cloning the checkboxes hide the first model of checkbox
             var checkbox1 = document.getElementById("check")
             checkbox1.style = "display:none"

So I inserted checkboxes into this Collection elements from Materializecss:

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

Only the collection lines became too wide because checkboxes cannot go inside a link area) and the link area takes all row. Who knows how to make them all in one row and narrow?

Answer 2

1. Materializecss requires a label element to wrap an input and span, I don't think your javascript does this, https://materializecss.com/checkboxes.html

2. Yes, you need different id and for attributes for each checkbox, I suggest using the i in your for loop to create the id, setAttribute("id", "item_" + i);

3. When you ask about reading values, I assume you mean server side when form is submitted? You will need 2 inputs to read 2 values when form is submitted, consider using a hidden input too

Formatting tip: use lower case in createElement