Twitter Bootstrap Input Tags Not Working With Jquery Before()

I am using Jquery to clone() a div and change its children's id, one of the children is a Bootstrap-tagsinput. You can find a Demo here. After clicking add new run a new div is add

Solution 1:

Try calling .tagsinput() on #tag2 after adding it to the page.

$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();

Edit:

This is probably due to how the TagsInput plugin initializes itself. What I would do is create a template of your empty run container and hide it on the page or load it via JavaScript.

<divclass="control-group hide"id="ControlGroupTemplate"><labelclass="control-label"for="textarea">Tools :</label><inputtype="text"class="tags"id="tag1"value="Amsterdam,Washington,Sydney,Beijing"data-role="tagsinput" /><br /><divclass="SystemFiles"data-role="collapsible"><!-- File Button --><divclass="control-group"><labelclass="control-label"for="filebutton">OP Customer DLIS files (PUC)</label><divclass="controls"><inputid="filebutton"name="filebutton"class="input-file"type="file"></div></div><!-- File Button --><divclass="control-group"><labelclass="control-label"for="filebutton">OP logup DLIS files (LUP)</label><divclass="controls"><inputid="file1"name="filebutton"class="input-file"type="file"></div></div><!-- File Button --><divclass="control-group"><labelclass="control-label"for="filebutton">OP Producer DLIS files (PUP)</label><divclass="controls"><inputid="file2"name="filebutton"class="input-file"type="file"></div></div><!-- File Button --><divclass="control-group"><labelclass="control-label"for="filebutton">OP well folder</label><divclass="controls"><inputid="file3"name="filebutton"class="input-file"type="file"></div></div><divclass="control-group"><labelclass="control-label"for="filebutton">Prints</label><divclass="controls"><inputid="file4"name="filebutton"class="input-file"type="file"></div></div></div><buttonclass="btn btn-mini link-btn expandbtn"id="exp"type="button">expand toggle</button><buttonclass="btn btn-mini btn-primary"><spanclass="glyphicon glyphicon-arrow-down"></span>Duplicate</button></div>

Then you clone the ControlGroupTemplate and apply the TagsInput method to it.

var s = $('#ControlGroupTemplate')
  .clone()
  .attr('id', '#run' + (++runNum))
  .wrap('<div>');

s.find('#tag1').attr('id', 'tag2');
$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();

I would even use this method to add your initial run to the page in your document.ready() handler.