How do I get the value of clicked <span> from multiple spans inside multiple div's while using turn.js library

Question

How do I get the value of clicked from multiple spans inside multiple div's. I have done this it works only if I don't apply the turn.js library other wise it doesn't work. the html I have

<div class="col-md-6">
  <div class="conversation">
    <div class="conversation-container  myconvo12">
      <div class="message received">
        <span class="name2">Imran Shah</span><br/><span id="18008"> net shta ? </span>
        <span class="metadata"><span class="time"> 12:35</span></span>
      </div>
      <div class="message sent"> <span class="name">Atif</span><br><span id="18009"> Ao </span>
        <span class="metadata"><span class="time"> 12:35</span></span>
      </div>
      <div class="message received">
        <span class="name2">Imran Shah</span><br><span id="18010"> ok </span>
        <span class="metadata"><span class="time"> 12:36</span></span>
      </div>
      <div class="message received">
        <span class="name2">Imran Shah</span><br><span id="18028"> Halaka da kam ze ye ? </span>
        <span class="metadata"><span class="time"> 14:40</span></span>
      </div>
    </div>
  </div>
</div>

$(document).on('click', 'span', function ({
            var val = $(this).text()
          console.log(val)
        });

Answer 1

try this one

$('.message span').click(function(){
  var val = $(this).text()
  console.log(val)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="conversation">
    <div class="conversation-container  myconvo12">
      <div class="message received">
        <span class="name2">Imran Shah</span><br/><span id="18008"> net shta ? </span>
        <span class="metadata"><span class="time"> 12:35</span></span>
      </div>
      <div class="message sent"> <span class="name">Atif</span><br><span id="18009"> Ao </span>
        <span class="metadata"><span class="time"> 12:35</span></span>
      </div>
      <div class="message received">
        <span class="name2">Imran Shah</span><br><span id="18010"> ok </span>
        <span class="metadata"><span class="time"> 12:36</span></span>
      </div>
      <div class="message received">
        <span class="name2">Imran Shah</span><br><span id="18028"> Halaka da kam ze ye ? </span>
        <span class="metadata"><span class="time"> 14:40</span></span>
      </div>
    </div>
  </div>
</div>

Answer 2

[Posting as an answer because a comment would not be clear / is too short]

There are issues with the sample code that you have posted and overall it is not clear where the bugs lie as there could be a few.

For example, in the code you posted as the click event listened, you refer to #msgid, which is not in your example html, and this.id looks like it should possibly be $(this).id but it is unclear in the context of your question, and also #msg is not present in your example and I can't understand why you would want to refer to event.taret there.

$(document).on('click', 'span', function ({
            $('#msgid').val(this.id);
            $('#msg').val($(event.target).
        });

I recommend that you review and edit your question and make it more obvious what you are trying to do and what issues you are experiencing.