Bootstrap tags input is not working with new dynamically added table rows with jquery

Bootstrap tagsinput is not working with new dynamically added rows. Actually I am cloning a hidden table row which contains some input fields and a icon. On click of that icon, modal form appears and on submit of that modal form, I set some values from that modal form into input bootstrap tagsinput field that is contained in that row. Please note that all rows have same input fields but that have different tr row ids and input tagsinput field ids. When I try to set value in bootstrap tagsinput field for any dynamically added row, value is always set against hidden tr row, I don't know why this is happening with tagsinput. I tried to set value for other input fields (textfield, numberfield) but they are working fine. What's the issue with this?

$('.table-add').click(function () {

// var $tr = $TABLE.find('tr.hide');
// var $clone = $tr.clone(true).addClass('hide table-line');

// $tr.removeClass('hide table-line');

var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
hid = $TABLE.find('tr.hide').attr('id');

// //Assigning every table row a unique ID
var max=0;
$('table').find('tr').each(function(){
var id=parseInt($(this).attr('id'));
if (id>=max){
max = id;
}
});

//cloning row with new ID
$clone.attr('id', parseInt(max)+1);
$clone.find('input.myinput').attr('id', parseInt(max)+1);
$clone.appendTo( $('#'+hid).parent() );
});


Every table row has these ( tagsinput field and modalform field).

<td>
<span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span>
</td>

<td>
<input contenteditable="false" name="unique_tag"
class = "myinput" id="tagsinputid" data-role="tagsinput"/>
</td>


When modal form button is clicked, Following code works, in which I get parent tr row and get row Id that is unique and save it for another action and populate modal form with some words.

//Click on model box
$('tr #modelbox').click(function() {
var $row = $(this).closest('tr');
var tbid = $row.attr('id'); // table row ID
$('#myModal').data('current', tbid); //save current tbid
var fieldOption =
$row.find('#words option').each(function() { fieldOption.push($(this).val()); });
console.log(fieldOption);

$('.modal-body-inner').html('');
for(var i = 0, size = fieldOption.length; i < size ; i++){
var item = fieldOption[i];
$('.modal-body-inner').append("<span class=span1 > "+ item + "</span>");
}
});


On click of modal form, I do take table row and set value against tagsinput field for that table row which is not working in my case. This is not working for tagsinput field I don't know why but it is working for other input fields. When I set value in tagsinput for that row, this code set value for tagsinput field for hidden row.

$('#modelformbuttonclick').click(function() {
var tableRowId = $('#myModal').data('current');
c = '#' + tableRowId;
//removing all tags if anyone updates tags
$(c+ ' input.myinput').tagsinput('removeAll');
var count=1; var color = ["Europe","America","Australia","Africa","Asia", "Asia2", "Africa2"];

$('.modal-body-inner span.myclass').each(function() {
c = '#' + tableRowId;
var randomNumber = Math.floor(Math.random()*color.length);
$(c + ' input.myinput').tagsinput('add', { "name": "tagsdata", "value": $(this).text() , "text": $(this).text(), "continent": color[randomNumber]});
count = count+1;
});
submitForm();
});


#modelbox

.modelbox

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.