How to print the content of a div that changes based on a foreach statement?

I have an ArrayList named conversations_client, I want to be able to get the value of conversation[6] for each div.
Each one the the media div represent a conversation.
Here is a part of my code :

<c:forEach var="conversation" items="${conversations_client}" >
    <div class="media">
        <div class="media-left">
            <input class="checkbox" type="checkbox" name="selected-conv">
        </div>
    <div class="media-body">
         <h4 class="media-heading">${conversation[0]}</h4>
         <span class="hidden">${conversation[6]}</span>
 ......

I had first tried to use this code :

<script type="text/javascript">
    $('.media').click(function(){
       var text = $(this).text();
       alert(text);
    });     
</script>

But it would print not only conversation[6] but others as well since they’re all inside the div with class media.

Then I tried this :

<script type="text/javascript">
    $('.media').click(function(){
       var text = $('.hidden').text();
       alert(text);
    });             
</script>

But it would print the same id for all divs, which is the id of the first one.

How can I do that? and would it be better to wrap those media divs with tags to be able to use a specific action for each one of them? because I am displaying all conversations, then once the user will click on one them I’ll have to recover its id to be able to display the messages of that specific conversation and it isn’t advisable to write Java code inside of jsp.

Thank you 🙂

Use find from current element.

$('.media').click(function()
    {
        var text = $(this).find('#hidden').text();
        alert(text);
   });

UPDATE:

You are using loop to repeat the markup. It’s not good to use ID hidden multiple times as per W3C standards. ID should be unique and should be used once in the page.

Use class instead of id for multiple usages. In this case class=”hidden”

Better change <span id=”hidden”>${conversation[6]}</span> to <span class=”hidden”>${conversation[6]}</span>

Also change JS to find .hidden

 $('.media').click(function()
    {
        var text = $(this).find('.hidden').text();
        alert(text);
   });