We Keep Coding

Multiple random id in element

I have many span element with many ids such as these:
<span id="spn1" class="span-text">hello</span>
<span id="spn2" class="span-text">world</span>
<span id="spn3" class="span-text">12345</span>
It could be 1 or 100 span element. If 100 span was created so the id will be spn100. No problem with that. Now I have problem with javascript code because I hardcoded the ids when the span such as these:
var text = $("#spn1").text() + "\r\n" + $("#spn2").text() + "\r\n" + $("#spn3").text();
The javascript code above was hardcoded so if 100 span was created; my copy function will not worked. How do I solve this problem?
Full code : http://jsfiddle.net/p3h7j4eb/
Thanks in advance

You can use the CSS class as selector and just iterate over that with $.map. Then there's no more need for all those id properties:
var text = $.map($(".span-text"), function(span) {
return $(span).text();
}).join("\r\n");
console.log(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="span-text">hello</span>
<span class="span-text">world</span>
<span class="span-text">12345</span>

You can iterate over all elements with you classname, using the 'each' function like this:
var text = '';
$('.span-text').each(function ()
{
text += $(this).text() + '\r\n';
}

How to have jquery add a panel inside a panel in Bootstrap v3

I am running through a loop, and appending text from an array into a main panel, but I want so that each "chunk" of text is inside it's own panel.
Here's the HTML:
<div class="panel no-overflow">
<p id="fromTweets"> imported text goes here</p>
</div>
My JQUERY:
for (i = 0; i < result.statuses.length; i++) {
//Print out username and status
$("#fromTweets").append('<b>' + "Username: " + '</b>' + result.statuses[i].user.screen_name + '<br/>');
$("#fromTweets").append('<b>' + "Tweet: " + '</b>' + result.statuses[i].text + '<br/>');
}
Also, I guess I'm more generally confused with using css and jquery with the "append" way. Notice how I'm bolding text using <b>, is this bad practice, is there a better way to do this? Same question for the <br> tag.

You are probably best to create a div to which you can append panels. For instance:
<div class="panel-holder">
You can then use the append to append not just text, but a div tag with the class 'panel'.
Here's a fiddle with a quick demonstration:
https://jsfiddle.net/oq2bfyam/1/

How to get specific span's value from div in JQuery

I have a div and i want to get text of a specific span from that div.
Following is my Div code:
'<div class="dvDynamic_' + pid + '"><p hidden="true">'+pid+'</p><span class="count_' + pid + '">' + count + '</span><span id="pname" style = "margin-left:70px;">' + pname + '</span><span id="punitprice" style = "margin-left:150px;">' + uprice + '</span></div>'
and i want to get text of the following span:
<span class="count_' + pid + '">' + count + '</span>
Please help me how to do it .

The span element which you want to target have next sibling with id. you can target that element using id selector and traverse to required span using .prev():
$('#pname').prev().text()

If you know the pid of the span you want to get, you can use
$('.count_' + pid).text()

You can identify pname element using ID selector then use .prev() to identify the desired span
$('#pname').prev().text()

Using find you can get value of span through div
function findSpanValue(pid){
return $(".dvDynamic_"+pid).find(".count_"+pid).text();
}

Get span element to target have next sibling with id. you can get that element using id selector and traverse to required span using .prev():
$('#pname').prev().html();
or
$('#pname').prev().text();

How to show hidden div in the same line as the paragraph text?

I am trying to use the mentions plugin to add a hidden user id so I can parse the user correctly.
When I mention someone here is how it needs to look like
Hello [Mention User], This is just a test
to do that, I had to override the insert method within the plugin like this
insert: function(data){
return '<div style="display: inline;">'
+ '<span class="mentionedUser">[' + data.name + ']</span><div class="hiddenMentionUserID" style="display:none;">'+data.id+'</div>'
+ '</div>';
}
The problem with the above code is that is does not show the text on the same line as I am expecting.
Rather, here is how is the text being displayed
Hello
[Mention User]
, This is just a test
How can I tweak my html/css code to make the mention name appears on the same line as the text along with the hidden user id?

Don't use div use a span
insert: function(data){
return '<span >'
+ '<span class="mentionedUser">[' + data.name + ']</span><div class="hiddenMentionUserID" style="display:none;">'+data.id+'</div>'
+ '</span>';
}

jquery p:last-child not working

I'm trying to add some data to my paragraphs, how ever it is only working for my first p.
I can make it put the data into my last p by using p:gt(0) but seems like I should be able to use p:last-child.
Any idea where I'm going wrong?
HTML
<div class="col-md-12" id="quizEnd" style="display:none;text-align:center;">
<p></p>
<p></p>
<h2></h2>
</div>
JS:
$("#quizEnd p:first-child").text("Navn : " + quizName);
$("#quizEnd p:last-child").text("Email : " + quizMail);

It's because that p element isn't the last child. The h2 elements is.
You could use :last-of-type instead:
$("#quizEnd p:last-of-type").text("Email : " + quizMail);
You could also use the .last() method or the jQuery :last selector:
$("#quizEnd p:last").text("Email : " + quizMail);
$("#quizEnd p").last().text("Email : " + quizMail);