Tagging system with dynamic input - php

Question

Right now I'm trying to combine the bootstraps tagging-system with a dynamic input field code. I want for every dynamic generated field/div a tag-inputfield.
like this way:
Topic1: Title
Description: it's about a title
Tags: hello, boring, title
Topic2: it's a title again
Description: it's a description again
Tags: idk, help
(...) and so on.
My jquery file for adding additional fields looks like this:
$(document).ready(function () {
var maxGroup = 10;
$(".addMore2").click(function() {
$(".tagging").css("display", "none");
if ($('feld2').find('.fieldGroup').length < maxGroup) {
var fieldHTML = '<div class="form-group fieldGroup">' +
$(".fieldGroupCopy").html() + '</div>';
$('feld2').find('.fieldGroup:last').after(fieldHTML);
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
//remove fields group
$("feld2").on("click", ".remove", function () {
$(this).parents(".fieldGroup").remove();
});
});
The not working part is this one:
When I click on my "add" button:
see here
it makes a copy of the this part:
<div class="form-group fieldGroupCopy" style="display: none;">
<table>
<tr>
<td class='first_td'><label for="titel"><b>Titel:</b></label></td>
<td><input type="text" name="description[]" class="form-control" placeholder="Title"/></td>
<td>-</td>
</tr>
<tr>
<td><b>Beschreibung:</b></td>
<td><textarea type="text" name="description[]" class="form-control" placeholder="Beschreibung des Themas"/></textarea></td>
</tr>
<tr>
<td><label for="Tags"><b>Tags</b></label></td>
<td colspan='2'>
div class="form-group">
<input type="text" name='tags_WiBe[]' placeholder='Add Tags' data-role="tagsinput" class="form-control" />
</div>
</td>
</tr>
</table>
</div>
But the tagging-system does not work within the copied fields.
Its only working outside of the div "form-group fieldGroup".
see here
Everytime I enter a tag the form wants to submit, but thats not what I want.
Please help me...
edit:
Here is a jsfiddle to show the problem more clearly.
https://jsfiddle.net/t5vrLsur/#&togetherjs=pbAhjTR1t1
I know it's not the most beautiful structure.
Don't be too hard on me. :(

Answer 1

The thing is that the plugin itself take care about the first initialisation on DOM ready. In your case, you want to run it after each adding card.
You can do this by simple run the plugin initialisation in the new card context.
Also, you have to remove the data-role attribute from the input in the template because, as we said, this attribute meant to initialise the plugin automatically but in the template's case we will do it manually after we will load the card.
So here are the relevant lines:
// wrap the html with jQuery so you could delete the inputtags wrapper later
var fieldHTML = $('<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>');
$('feld2').find('.fieldGroup:last').after(fieldHTML);
// initialise again
fieldHTML.find('input').tagsinput();
Working demo
http://output.jsbin.com/dabijac/
Also, you have couple of jQuery references in your code which cause problem. You have either remove it or using use $.noConflict to keep them.