title: Clonned Select2 is not responding
body: <p>I am using select2 in a <code>bootstrap form-group</code> which contains one <code>datepicker</code> and one select2. When I cloned the form-group only the <code>datepicker</code> can work, the select2 can't work at all.  </p>
  
  <p>I almost try all the answer on stackoverflow, every time I try, it will display different error, like <strong>"style error"</strong>, <strong>"event can't work"</strong>, <strong>"click the cloned select2 but responsed to the origin select2"</strong>.  </p>
  
  <p>My code is as following:  </p>
  
  <p><em>HTML code:</em></p>
  
  <pre><code>    &lt;div class="form-group drive-item"&gt;
        &lt;label class="col-md-2 col-sm-3 col-xs-12 control-label"&gt;试驾时间: &lt;/label&gt;
        &lt;fieldset&gt;
          &lt;div class="control-group"&gt;
            &lt;div class="controls"&gt;
              &lt;div class="col-md-3 has-feedback"&gt;
                &lt;input type="text" class="form-control has-feedback-left drive-date" name="drive_date" placeholder="试驾日期" aria-describedby="inputSuccess2Status"&gt;
                &lt;span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span id="inputSuccess2Status" class="sr-only"&gt;(success)&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                &lt;select class="select2_one form-control select2-gentlla" tabindex="-1" name="drive_time" multiple="multiple"&gt;
                  &lt;option value=""&gt;&lt;/option&gt;
                  &lt;foreach name="hour_list" item="hour"&gt;
                    &lt;option value="{$hour}"&gt;{$hour}&lt;/option&gt;
                  &lt;/foreach&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;span aria-hidden="true" class="glyphicon glyphicon-plus glyphicon-margin"&gt;&lt;/span&gt;
        &lt;/fieldset&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><em>The JS code:</em></p>
  
  <pre><code>$('.drive-item').on('click', '.glyphicon-plus', function(){
    $form_group = $(this).parent().parent();
    $clone = $form_group.clone();
  
    $datepicker = $clone.find('.drive-date');
    $datepicker.daterangepicker('destroy');
    $datepicker.removeAttr('id');
    $datepicker.daterangepicker(datepicker_option);
  
    $select2_origin = $form_group.find('.select2_one');
    $select2_origin.select2('destroy');
  
    $select2_clone = $select2_origin.clone();
    console.log($select2_origin);
    console.log($select2_clone);
  
    $form_group.after($clone);
  
    $select2_origin.select2();
    $select2_clone.select2();
  
  });
  </code></pre>
  
  <p>Any help/suggestion will be appreciable.</p>
  
  <p>I solved this problem after read this thread:<br>
  <a href="https://stackoverflow.com/questions/29252443/select2-clone-is-working-only-twice">Select2 clone is working only twice</a></p>