Selectize.js: cloning of the element and destroy() issue

Question

I'm using Selectize.js and I need to clone html subform with transformed select elements. After I clone and insert subform select functionality is broken.

I have read that one of the solution is to call destroy() method for cloned selects and after initialize selectize for them again.

I tried to follow this advice and my code looks like:

   $(formFields).find("select").each(function(){
    if (this.selectize) {
        this.selectize.destroy();
    }
});

What I expect to see is standard select elements, but I see selectized elements with not working dropdown functionality. Any ideas?

Answer 1

// When add button is clicked
$('#add').on('click',function(){
   $('.combobox').each(function(){ // do this for every select with the 'combobox' class
      if ($(this)[0].selectize) { // requires [0] to select the proper object
         var value = $(this).val(); // store the current value of the select/input
         $(this)[0].selectize.destroy(); // destroys selectize()
         $(this).val(value);  // set back the value of the select/input
      }
   });
   $('#monsters .form-group:first')
      .clone() // copy
      .insertAfter('#monsters .form-group:last'); // where
      selectizeme(); // reinitialize selectize on all .combobox
});

try visit here: http://mariolurig.com/selectize-demo.htm