This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
i am trying to create Bootstrap Panel dynamically by on click function but every Panel should create multiple forms by on click function.. In my code the first Panel create forms by clicking on button but the rest of panels doesn't create forms..
var counter=1;
$(".panel-increment").on("click", function(e){
e.preventDefault();
var panelHtml = '<div class="panel panel-info"> ' +
'<div class="panel-heading"> ' +
'<h4 class="panel-title"> ' +
'<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
'</div> ' +
'<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse"> ' +
'<div class="panel-body">' +
'<div class="row" > ' +
'<div class="col-md-12 sch-box">' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div> ' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div> ' +
'<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div> ' +
'<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div> ' +
'</div> ' +
'</div> ' +
'</div> ' +
'<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button> ' +
'</div> ' +
'</div>';
$(this).closest(".it-right-side").find(".panel-group").append(panelHtml);
counter++;
});
$(".panel-addbtn").on("click", function(e){
e.preventDefault();
var formHtml = '<div class="row" >' +
'<div class="col-md-12 sch-box"> ' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>' +
'<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>' +
'<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>' +
'</div>' +
'</div>';
$(this).closest(".panel-collapse").find(".panel-body").append(formHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 it-right-side">
<div>
<div class="col-md-12" id="dynamicInput">
<!--Start Panel-->
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Day 1
<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body" id="formcreation">
<!--Schedule-->
<div class="row" >
<div class="col-md-12 sch-box">
<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>
<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>
<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>
<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>
</div>
</div>
</div>
<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button>
</div>
</div>
</div>
</div>
<!--End panel-->
</div>
<button type="button" class="btn center-block panel-increment"><i class="fa fa-plus"></i> </button>
</div>
This is because:
$("selector").on("click", function(){
});
works for static html, in case of dynamic html use .on() like:
$("document").on("click", ".panel-addbtn", function() {
});
You can try defining an onclick event in the dynamic html like
<div onclick="myFunction()">
</div>
now you can create a javascript function and it would always work now matter the html is static or dynamic
function myFunction(){
//do something
}
Related
I am new to javascript and I am trying to create a nested row that gets viewed when clicked using accordion. I have written javascript to dynamically expand the rows and it is not expanding at all. out of blue it once did and only the first element got expanded, I made few changes in my code then again none of them is expanding now, please help me out.
function mainfunction(challenges,targets) {
console.log(challenges)
var table = document.getElementById('challenge_table_tree')
for (i in challenges) {
table.innerHTML += '<div class="row accordion-toggle" data-toggle="collapse" data-target="#'+challenges[i].id +'">' +
'<div class="col">'+ challenges[i].name+'</div>' +
'<div class="col">'+ challenges[i].id+'</div>' +
'</div>' +
'<div class="accordion-body collapse" id="'+challenges[i].id+'"></div>'
for(j in targets) {
var hidden_data = document.getElementById(challenges[i].id)
if(targets[j].challenge_id==challenges[i].id) {
console.log('here')
hidden_data.innerHTML += '<div class="row">' +
'<div class="col">'+targets[j].id+'</div>' +
'<div class="col">'+targets[j].name+'</div>' +
'<div class="col">'+targets[j].parent_id+'</div>' +
'</div>'
}
}
}
}
The Html it generates is
<div class="form-group" id="challenge_table_tree">
<div class="row accordion-toggle" data-toggle="collapse" data-target="#8a263b72-7e61-487a-b756-f7744c9dc623">
<div class="col">Adersh Ganesh</div>
<div class="col">8a263b72-7e61-487a-b756-f7744c9dc623</div>
</div>
<div class="accordion-body collapse" id="8a263b72-7e61-487a-b756-f7744c9dc623">
<div class="row">
<div class="col">4df41507-8c7d-48a8-8cc7-66094dd58844</div>
<div class="col">undefined</div>
<div class="col">null</div>
</div>
</div>
<div class="row accordion-toggle" data-toggle="collapse" data-target="#905bd9a2-d47a-4269-9fae-03c6daa46c16">
<div class="col">Adersh</div>
<div class="col">905bd9a2-d47a-4269-9fae-03c6daa46c16</div>
</div>
<div class="accordion-body collapse" id="905bd9a2-d47a-4269-9fae-03c6daa46c16"></div>
<div class="row accordion-toggle" data-toggle="collapse" data-target="#7abc296e-9347-405d-9d19-4bea7b29651c">
<div class="col">aaaaa</div>
<div class="col">7abc296e-9347-405d-9d19-4bea7b29651c</div>
</div>
<div class="accordion-body collapse" id="7abc296e-9347-405d-9d19-4bea7b29651c"></div>
</div>
I need to build notes app like site and I have to delete specific div with a click on x icon.
I think that i need to delete a object from the array with splice function, but I can't delete a specific object from it.
var notesArr = []
function objToArr() {
noteObj = {
text: textAreaDv.value,
date: dateInput.value,
time: timeInput.value,
}
notesArr.push(noteObj)
// console.log(notesArr)
printTohtml()
}
function printTohtml() {
var str = ""
for (i = 0; i < notesArr.length; i++) {
str += '<div class="col-3 noteDv id="noteDvid">'
str += '<i class="fa fa-times-circle icon" aria-hidden="true" onclick="remove()"></i>'
str += '<div class="textBox">'
str += '<div class="textDv">' + notesArr[i].text + '</div>'
str += '<div class="timeDV">' + notesArr[i].date + '</div>'
str += '<div class="dateDv">' + notesArr[i].time + '</div>'
str += '</div>'
str += '</div>'
}
noteId.innerHTML = str
}
function remove() {
notesArr.splice(0)
}
<div class="container">
<div class="row mt-5">
<div class="col-2"></div>
<div class="form-group col-8">
<label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
<textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
</div>
</div>
<div class="row buttonRow">
<div class="col-8 offset-2">
<div class="row pl-5">
<button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>
<button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>
<input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
<input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
</div>
</div>
<div class="row" id="noteId">
<div class="col-3 noteDv" id="noteDvid">
<i class="fa fa-times-circle icon" aria-hidden="true"></i>
<div class="textBox">
<div class="textDv">text</div>
<div class="timeDV">time</div>
<div class="dateDv">date</div>
</div>
</div>
</div>
</div>
You cannot reuse the ID, use the class instead
You likely want to do noteId.innerHTML += str to concatenate
remove onclick="remove()" from <i class="fa fa-times-circle icon" aria-hidden="true"></i> and add a class of remove to that <i>
add the index as an attribute
str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
// a click in the output div
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) { // it was the remove that was clicked
notesArr.splice(tgt.dataset.idx,1); // take it IDX and remove the item
printTohtml(); // re-render
}
})
var notesArr = []
function objToArr() {
noteObj = {
text: textAreaDv.value,
date: dateInput.value,
time: timeInput.value,
}
notesArr.push(noteObj)
// console.log(notesArr)
printTohtml()
}
function printTohtml() {
var str = ""
for (i = 0; i < notesArr.length; i++) {
str += '<div class="col-3 noteDv">'
str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
str += '<div class="textBox">'
str += '<div class="textDv">' + notesArr[i].text + '</div>'
str += '<div class="timeDV">' + notesArr[i].date + '</div>'
str += '<div class="dateDv">' + notesArr[i].time + '</div>'
str += '</div>'
str += '</div>'
}
noteId.innerHTML = str;
}
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) {
notesArr.splice(tgt.dataset.idx,1);
printTohtml()
}
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row mt-5">
<div class="col-2"></div>
<div class="form-group col-8">
<label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
<textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
</div>
</div>
<div class="row buttonRow">
<div class="col-8 offset-2">
<div class="row pl-5">
<button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>
<button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>
<input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
<input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
</div>
</div>
<div class="row" id="noteId"></div>
</div>
PS: If you want to delete the div instead of rewriting, you can do
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) { // it was the remove that was clicked
this.closest(".noteDv").remove()
}
})
If you simply want to remove element from screen without ordering rest remaining elements in a view - then most easy way is to use node.removeChild(child) method :
<div id="container">
<h3>Click on a link to remove it !</h3>
<a href='#' onclick='this.parentNode.removeChild(this);'>Hot summer</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Pretty Autumn</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Cold winter</a>
</div>
I have this code below to create a loop of div using javascript. It's working fine on looping the div that I wanted. But the problem is the alignment of the div. Its in alternate position. What I want to accomplish here is to have my design div to be aligned.
Expected Output
First Div | Second Div <<-- First Loop
First DIv | Second Div <<-- Second Loop
Current Design in my code
| First DIv
First Div |
function isOdd(n) {
var IsOdd = false;
if (Math.abs(n % 2) == 1) {
IsOdd = true;
}
return IsOdd;
}
$("#click").click(function(e) {
e.preventDefault();
var odd = [1, 3, 5, 7, 9];
var even = [2, 4, 6, 8, 10];
var counter = 0;
var FireCounter = [1, 2, 3]
for (var i = 0; i < FireCounter.length; i++) {
var ArchPlanDetails = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).find(".req");
var cardTitle = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).parent().find(".card-title")[0]; //.innerText;
console.log(cardTitle);
var dividedAlertPlanDetails = FireCounter.length / 2;
var mainCard = "";
mainCard = '<div class="row">' +
'<div class="col-md-6" id="divBody_' + i + '">' +
'</div>' +
'<div class="col-md-6" id="divBody2_' + i + '">' +
'</div>' +
'</div>';
$("#modalAlert .modal-body").append(mainCard);
var fieldSet = '<fieldset class="border p-2 mt-2">' +
'<legend style="color:black !important; font-size:30px !important">' + cardTitle + '</legend>' +
'<div id="fieldDivID' + i + '"></div>' +
'<fieldset>';
//var cards = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + cardTitle + ' </h3 ></div> <div class="card-body"> </div>'
if (isOdd(i)) {
$("#modalAlert .modal-body #divBody_" + i).append(fieldSet);
} else {
$("#modalAlert .modal-body #divBody2_" + i).append(fieldSet);
}
counter++;
$.each(ArchPlanDetails, function(Index, Value) {
var appendBody = "";
var id = "#fieldDivID" + i;
var divID = "#divBody_" + i;
var divID2 = "#divBody2_" + i;
var textboxValue = $(Value).find("input[type=text],[type=number]").val();
var InnerText = Value.innerText.trim();
appendBody = '<div class="row mt-2" style="font-size:20px">' +
'<div class="col-md-12"> ' + InnerText + ' </div >' +
'</div >';
if (textboxValue == "") {
if (isOdd(i)) {
$(divID + " " + id).append(appendBody);
} else {
$(divID2 + " " + id).append(appendBody);
}
}
});
}
$("#modalAlert .modal-header").html("Header");
$("#modalAlert").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form id="frmPlanDetails">
<div class="col-md-12 divHide" id="dvFireCounter1">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter1"></span> Plan A
<a class="fa fa-window-minimize float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="Fire" name="FireIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="Fire">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
<fieldset class="border p-2">
<div class="row">
<div class="col-md-6 req">
Ave. Cover(mm)
<input type="text" class="form-control flat" name="FireAveCover" id="" placeholder="25">
</div>
<div class="col-md-6 req">
Overall Depth(mm)
<input type="text" class="form-control flat" name="FireOverAll" id="" placeholder="150">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter2">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter2"></span> Plan B
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="BP" name="BPIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="BP">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
B
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter3">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter3"></span> Plan C
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="AS" name="ASIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="AS">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
C
</div>
</div>
</div>
<button id="click">Click</button>
</form>
<div class="modal fade" id="modalAlert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-success">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
jsFiddle
This is the code about in my template file
<ul class="playListForm" id="playList" style="list-style: none;">
#foreach($listSong as $song)
<!--<?php
$url = URL::route("listentomusic",$song->id_song."**".$song->title."**".$song->artist."**".$song->code128."**".$song->code320);
$urlup = URL::route("voteup", $song->id_song);
$urldown = URL::route("votedown", $song->id_song);
?>-->
<?php
$urlsource = 'http://api.mp3.zing.vn/api/mobile/source/song/'.$song->code128;
if($song->position == 1){
?>
<li id="{{$song->position}}" class="active">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div>
</a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp" style="visibility: hidden;">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown">
Down
</button>
</div>
</div>
<hr style="margin-top: 9px">
</div>
</li>
<?php
}
else{
if($song->position != count($listSong)){
?>
<li id="{{$song->position}}">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown">
Down
</button>
</div>
</div>
<hr style="margin-top: 10px">
</div>
</li>
<?php
}
else{
?>
<li id="{{$song->position}}">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">
Down
</button>
</div>
</div>
<hr style="margin-top: 10px">
</div>
</li>
<?php
}
}
?>
#endforeach
</ul>
And I tried to append new "li" by this JQuery code:
var newLI = '<li id="'+lastPos+'">'+
'<div class="form-inline plItem">'+
'<div class="form-group plNum">'+lastPos+'</div>'+
'<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
'<div class="form-group">'+
'<div class="form-inline">'+
'<p style="display:none" id="songId">'+song['id_song']+'</p>'+
'<button id="upBtn" class="form-group btn btn-default btnUp">'+
'Up'+
'</button>'+
'<button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
'Down'+
'</button>'+
'</div>'+
'</div>'+
'<hr style="margin-top: 10px">'+
'</div>'+
'</li>';
$('#playList').append(''+newLI+'');
And here is the result:
So I have a problem about the new li at the last which I added by JQuery. I really don't know why. I hope you could give me some advices. Thank you.
P/S: Sorry for my bad English.
Same id maybe confused, generate with function
function generate(lastPos){
var newLI = '<li id="'+lastPos+'">'+
'<div class="form-inline plItem">'+
'<div class="form-group plNum">'+lastPos+'</div>'+
'<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
'<div class="form-group">'+
'<div class="form-inline">'+
'<p style="display:none" id="songId">'+song['id_song']+'</p>'+
'<button id="'+lastPos+'_upBtn" class="form-group btn btn-default btnUp">'+
'Up'+
'</button>'+
'<button id="'+lastPos+'_dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
'Down'+
'</button>'+
'</div>'+
'</div>'+
'<hr style="margin-top: 10px">'+
'</div>'+
'</li>';
$('#playList').append(''+newLI+'');
}
call function and new id for LI Element.
I am trying to append new data to the container div using jquery .append() function. But, the output appended trims the spaces between the labels created. Check the screenshot attached:
How can I fix this issue?
Javascript and HTML code are given below:
$("a.add-member").click(function(){
var user = '<div class="row user">'+
'<div class="col-md-6">abc#site.com</div>'+
'<div class="col-md-4">'+
'<div class="user-roles">'+
'<span class="label label-user-role">Role 1</span>'+
'<span class="label label-user-role">Role 2</span>'+
'<span class="label label-user-role active">Role 3</span>'+
'</div>'+
'</div>'+
'<div class="col-md-2 text-center">'+
'<i class="fa fa-times-circle-o"></i>'+
'</div>'+
'</div>';
$("#add-team .users").append(user).hide(0).fadeIn(700);
});
<div class="users">
<div class="row user">
<div class="col-md-6">xyz#site.com</div>
<div class="col-md-4">
<div class="user-roles">
<span class="label label-user-role">Role 1</span>
<span class="label label-user-role">Role 2</span>
<span class="label label-user-role active">Role 3</span>
</div>
</div>
<div class="col-md-2 text-center">
<i class="fa fa-times-circle-o"></i>
</div>
</div>
<div class="row user">
<div class="col-md-6">pqr#site.com</div>
<div class="col-md-4">
<div class="user-roles">
<span class="label label-user-role">Role 1</span>
<span class="label label-user-role">Role 2</span>
<span class="label label-user-role active">Role 3</span>
</div>
</div>
<div class="col-md-2 text-center">
<i class="fa fa-times-circle-o"></i>
</div>
</div>
</div>
Added spaces in jQuery code:
$("a.add-member").click(function(){
var user = '<div class="row user">'+
'<div class="col-md-6">ajinkya.bandagale#gmail.com</div>'+
'<div class="col-md-4">'+
'<div class="user-roles">'+
'<span class="label label-user-role">Admin</span> '+
'<span class="label label-user-role">Observer</span> '+
'<span class="label label-user-role active">Normal</span> '+
'</div>'+
'</div>'+
'<div class="col-md-2 text-center">'+
'<i class="fa fa-times-circle-o"></i>'+
'</div>'+
'</div>';
$("#add-team .users").append(user).hide(0).fadeIn(700);
})
Since you have written your code in HTML in different line for each span but when you add div or anything in through jQuery by creating a string it consider it as a single line.
So if you add \n at each line it will work.
user = '<div class="row user">' +
'<div class="col-md-6">pqr#site.com</div>' +
'<div class="col-md-4">' +
'<div class="user-roles">' +
'<span class="label label-user-role">Role 1</span>\n' +
'<span class="label label-user-role">Role 2</span>\n ' +
'<span class="label label-user-role active">Role 3</span>\n ' +
'</div>' +
'</div>' +
'<div class="col-md-2 text-center">' +
'<i class="fa fa-times-circle-o"></i>' +
'</div>' +
'</div>';
$(".users").append(user).hide(0).fadeIn(700);