tokenfield doesn't work with jQuery Clone

Question

Hello I'm using tokenfield to create input tags.

I've tried to clone the element without success. Is there any way to do a proper cloning? This is for a dynamic form.

Problem : Fields doesn't work after the cloning. I think the issue is in to tokens.

This is my JavaScript code :

$('.tokenfield').tokenfield();

This is my cloning function :

$('.clone').on('click',function(){
  var newLine = $(".attribute:first").clone();
  $("#variants").append(newLine);
});

This is my HTML code :

<div id="variants">
  <div class="row attribute">
    <div class="col-lg-4">
      <div class="input-group"> <span class="input-group-prepend">
        <button class="btn btn-light clone" type="button"><i class="icon-plus3"></i></button>
        </span> <input type="text" class="form-control" placeholder="Left button"> </div>
      </div>
      <div class="col-lg-8">
        <div class="form-group mb-1"> <input type="text" class="form-control tags tokenfield" name="variant[value][]" value=""><br>
      </div>
    </div>
  </div>
</div>

Answer 1

You are cloning the whole .attribute div... Which includes an input that is has an instance of tokenkenfield on...

As Barmar said .clone(true) will "deep clone", meaning it will also clone the properties and events... But You are talking about an instance of a plugin on a child. That is where the story ends bad ;)

Happilly, there is a way. You simply have to create another instance of tokenkenfield on that new input.

Something like this:

$('.clone').on('click',function(){
  var newLine = $(".attribute:first").clone();
  $("#variants").append(newLine);
  $("#variants").find(".tokenfield").last().tokenfield();  // New instance here.
});

Disclaimer: Untested (But, hoppefully, you got the concept... ;) )