title: Material Design Lite Table - Adding Rows Dynamically Breaks Format
body: <p>This is the markup for the checkbox using material-design-lite:</p>
  
  <pre><code>&lt;label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"&gt;
    &lt;input type="checkbox" id="checkbox" class="mdl-checkbox__input" /&gt;
    &lt;span class="mdl-checkbox__label"&gt;Checkbox&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>Problem is, that the labels <strong>for</strong> is connected to the inputs <strong>id</strong>.</p>
  
  <p>So when I add dynamically a new checkbox, I have to also add an id. But how do I find out which Id to add? Wouldn't it be a problem, when I am later going to add these rows into a database? </p>
  
  <p>Here is the working example:</p>
  
  <p><a href="http://codepen.io/anon/pen/QjNzzO" rel="nofollow">http://codepen.io/anon/pen/QjNzzO</a></p>
  
  <p><strong>Notice the checkbox of the new task you add</strong></p>