title: Creating MDL checkboxes with JavaScript
body: <p>I'm working on a to-do list app. User inputs task in a form, then JavaScript adds it to the HTML document.</p>
  
  <p>I'm trying to use the Material Design Lite checkbox component in my list items, but the checkboxes won't render correctly. All other buttons and form inputs render fine. I've done my best to get the JavaScript to copy it exactly, but it seems like no matter what I do I can't get it to appear correctly. </p>
  
  <p><strong>Check out the CodePen showing the problem <a href="https://codepen.io/bobbieysabel/pen/pYZzMy" rel="nofollow noreferrer">here</a>.</strong> </p>
  
  <p>I coded the first list item into the HTML to show the correct checkbox for reference. Adding subsequent list items through the form will show the incorrect checkbox.</p>
  
  <p>JavaScript code:</p>
  
  <pre><code>    //create list item
      let newLi = document.createElement('li');  
      newLi.classList.add('mdl-list__item');
  
      //create primary span container
      let toDoContainer = document.createElement('span');
      toDoContainer.classList.add('mdl-list__item-primary-content');
  
      //create checkbox and attach to primary span container
      let toDoLabel = document.createElement('label');
      toDoLabel.classList.add('mdl-checkbox', 'mdl-js-checkbox', 'mdl-js-ripple-effect');
      toDoLabel.htmlFor = 'list-checkbox-1';
      let checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.id = 'list-checkbox-1';
      checkbox.classList.add('mdl-checkbox__input');
      toDoLabel.appendChild(checkbox);
      toDoContainer.appendChild(toDoLabel);
  
      //create text and attach to primary span container
      let labelText = document.createTextNode(newToDoText.value);
      toDoContainer.appendChild(labelText);
  
      //append primary span container container to list item
      newLi.appendChild(toDoContainer);
  
      //create secondary span container
      let deleteContainer = document.createElement('span');
      deleteContainer.classList.add('mdl-list__item-secondary-action');
  
      //create delete button and append to secondary span container
      let deleteButton = document.createElement('button');
      deleteButton.classList.add('mdl-button', 'mdl-js-button', 'mdl-button--icon');
      let icon = document.createElement('i');
      let text = document.createTextNode('delete');
      icon.classList.add('material-icons');
      icon.appendChild(text);
      deleteButton.appendChild(icon);
      deleteContainer.appendChild(deleteButton);
      deleteContainer.addEventListener('click', function(e) {
          toDoList.removeChild(deleteButton.parentNode.parentNode);
      });
  
      //append secondary span container to list item
      newLi.appendChild(deleteContainer);
  
      //add list item to to-do list
      toDoList.appendChild(newLi);
  
      //empty form input
      newToDoText.value = '';
  </code></pre>
  
  <p>What the correct HTML should look like:</p>
  
  <pre><code>&lt;li class="mdl-list__item"&gt;
              &lt;span class="mdl-list__item-primary-content"&gt;
                  &lt;label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-2"&gt;
                      &lt;input type="checkbox" id="list-checkbox-2" class="mdl-checkbox__input" /&gt;
                  &lt;/label&gt;
                  Finish this to-do list app
              &lt;/span&gt;
              &lt;span class="mdl-list__item-secondary-action"&gt;
                  &lt;button class="mdl-button mdl-js-button mdl-button--icon"&gt;
                      &lt;i class="material-icons"&gt;delete&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/span&gt;
   &lt;/li&gt;
  </code></pre>
  
  <p>Anyone have an idea what I'm doing wrong?</p>
  
  <p><a href="https://getmdl.io/components/index.html#lists-section" rel="nofollow noreferrer">MDL guidelines</a></p>