title: How to add checkboxes dynamically using javascript?
body: <p>I use Bootstrap and have a form with 2 textfields and 2 checkboxes. With an add-Button, I want to add (per click) an additional textfield with checkbox. Currently I'm using this JS:</p>
  
  <pre><code>$("#addButton").click(function () {
  
      var newTextBoxDiv = $(document.createElement('div'))
          .attr("id", 'TextBoxDiv' + counter);
  
      /*  TODO: patterns festlegen    */
      newTextBoxDiv.after().html('&lt;div class="form-group label-floating"&gt;' +
          '&lt;label class="control-label"&gt;Answer' + counter + '&lt;/label&gt;' +
          '&lt;input type="text" class="form-control"/&gt;' +
          '&lt;/div&gt;&lt;div class="togglebutton"&gt;&lt;label&gt;&lt;input type="checkbox" checked=""&gt;Toggle is on&lt;/input&gt;&lt;/label&gt;&lt;/div&gt;');
  
      newTextBoxDiv.appendTo("#AnswerGroup");
  
  
      counter++;
  });
  </code></pre>
  
  <p>It adds successfully the textfield, but the checkbox isn't showing up, only the text "Toggle is on".</p>
  
  <p>How can I solve this? I inserted the JS inside <code>$(document).ready(function () {</code>.</p>
  
  <p><strong>EDIT</strong> I think the CSS causes the problem. When I simply add <code>'&lt;/div&gt;&lt;input type="checkbox" checked=""/&gt;&lt;/div&gt;'</code>, it only shows the checkbox without UI. After adding the rest (like class="togglebutton", I see nothing.</p>