title: Bootstrap Toggle for Checkbox adding extra div
body: <p>We have a form where users can create a shipping type by entering a name in a text field and optionally toggle a checkbox.  To add another shipping type, we use jQuery's clone method to rebuild the fields one or more times.</p>
  
  <p>My goal is to change the checkbox into a toggle using bootstrap-toggle.  This works fine for the first toggle, but subsequent sets of cloned fields fail. </p>
  
  <p>I've stripped down my initial code to the most basic example to try to get this to function to no avail:</p>
  
  <pre><code>&lt;div id="shipping_fields" class='shipping_fields'&gt;
      &lt;input id="shippings_hide_1" name="shippings1[hide][]" type="checkbox" value="0" data-toggle="toggle" class="hidden"&gt;
  &lt;/div&gt;
  &lt;span class='go indent padbot instruction clear'&gt;&lt;a href="#" id="add_shipping_button"&gt;&lt;i class='fa fa-plus-circle'&gt;&lt;/i&gt; Add Another Shipping Option&lt;/a&gt;&lt;/span&gt;
  
  &lt;script type="text/javascript"&gt;
    function addShippingToPage(event) {
      event.preventDefault();
      $('#shipping_fields').clone().show().
        removeAttr('id').
        insertAfter('.shipping_fields:last')
    }
    function removeShippingFields() {
      $('#shipping_fields_template').remove()
    }
    jQuery("#add_shipping_button").click(addShippingToPage);
    jQuery("#new_event").submit(removeShippingFields);
  &lt;/script&gt;
  </code></pre>
  
  <p>Bootstap-toggle converts my checkbox to look like this on page load, and the toggle works fine:</p>
  
  <pre><code>&lt;div id="shipping_fields" class="shipping_fields"&gt;
      &lt;div class="toggle btn btn-default off" data-toggle="toggle" style="width: 58px; height: 34px;"&gt;
          &lt;input id="shippings_hide_" name="shippings[hide][]" type="checkbox" value="0" data-toggle="toggle" class="hidden"&gt;
          &lt;div class="toggle-group"&gt;
              &lt;label class="btn btn-primary toggle-on"&gt;On&lt;/label&gt;
              &lt;label class="btn btn-default active toggle-off"&gt;Off&lt;/label&gt;
              &lt;span class="toggle-handle btn btn-default"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I add another field using my addShippingToPage function, the cloned HTML looks exactly the same. However, when I attempt to toggle the button, it ends up creating an entire copy of the preceding bootstrap-toggle code inside the first opening div, and of course the toggle fails to move.</p>
  
  <p>I have tried everything I can think of -- including trying Boostrap-switch which simply fails using clone, and renaming the classes and IDs to ensure differentiation -- but I cannot get this to work.  Any guidance is appreciated!</p>