select span text with jquery - html

Question

I have this html code, I want get span text when click in reply, but I have multiple of this code in my page and this select only first item, this is my code
<div class="display-comment" style="margin-right: 10px">
<div class="userProfileImageForComment">
<img src="{{asset('profile-media/'.$comment->user->profileimg)}}" alt="">
</div>
<span id="userName">{{ $comment->user->username }}</span>
<p>{{ $comment->comment }}</p>
<div class="comentActionAndDate">
<span>
{{ jdate($comment->created_at)->ago() }}
</span>
<a id="reply">
reply
</a>
</div>
and script is
<script>
$('#reply').click(function(){
var username = "#" + $('#userName').text() + " ";
$('#comment').val('');
$('#comment').val(username);
$('#comment').after( "<input type=\"hidden\" name=\"comment_id\" value=\"{{ $comment->id }}\" />" )
});
</script>

Answer 1

you can do get your span text with this comnmand:
$('#userName')[0].innerText
anything else?

Answer 2

var spanText = $(".comentActionAndDate span").html();
I assume this is for a comments thread though, in which case you should use relative finding to locate the text.
$('#reply').click(function(){
var spanText = $(this).find(".comentActionAndDate").children("span").html();
// Other stuff you might want to do
});
You also should not be using an ID for that reply button if it is being generated more than once. You should also be using a <button> not an <a> tag as the a tag is used for links.
The most correct approach would be to use a function onclick of the reply button:
<button onclick="getSpan(this);">reply</button>
JS:
function getSpan(ele) {
var spanText = $(ele).find(".comentActionAndDate").children("span").html();
// Other stuff you might want to do
}