jQuery, getting a value with a single class and multiple links

Question

Here's the issue I'm running into. I have a list of names, if a name is clicked on, I need jQuery to pass the variable to another page.

This is what I have, but of course it only pulls the first name.

$('.nameLink').live('click', function()  {
    var coachName = $('.coachName').val();
    $('#grayBorder').load('/team.php?coachName='+coachName);                
});

And the php code that generates the coaches names:

while($row=mysql_fetch_assoc($query)){
    echo '<a class="nameLink">
   <input type="hidden" class="coachName" value="'.$row['coach'].'" />
   '.$row['coach'].'
   </a>';

}

Is there anyway to write this so that it will get the correct name?

Answer 1

Instead of $('.coachName') you should have $('.coachName', this)

Currently, you are searching the entire page for elements with class coachName, but you really only want to find element below the clicked element. By passing the jQuery function a context (in your case this), you tell it only to search within this scope.

Answer 2

Try:

 var coachName = $(this).children('.coachName').val();