id search works only for first element

Answer 1

I'm pretty sure everything's working correctly with your jQuery, but animating just the opacity doesn't magically change the display style from none to block or whatever the element's value is. I'm pretty sure you set a style for .content to have display: none;. When you animate the opacity, for the divs, their display stays as none, except the first one, because by default, it's overridden with block. Is there any reason you're animating opacity and not using something like fadeIn() and fadeOut?

Also, since you're storing an id in the href, there's no need to do something like $(id, local_responses)...just use $(id). Take a look at this:

http://jsfiddle.net/SgwyM/

var local_links = $(".local_links");
var local_responses = $(".local_responses");

$(local_links).on("click", "a", function(e){
    e.preventDefault();
    var id = $(this).attr("href");
    local_links.find("div.arrow-selected").remove();
    $(this).parent().append('<div class="arrow-selected"></div>');
    $(".content", local_responses).fadeOut(400);
    $(id).delay(400).fadeIn(400);
});

And just to note, I changed the on binding because this way, it doesn't create an event handler for every <a> found - it creates one for each item in local_links, but is only executed for the selector "a".

Answer 2

I'm not sure exactly what behavior you're looking for, but posting your code unchanged to http://jsfiddle.net/CrossEye/hApgg/, I seem to get it working consistently for all three links.

I don't know why you write the parentheses wrapping the "a" below:

$(("a"),local_links).on("click", function(e){ //...

This would work equally well:

$("a", local_links).on("click", function(e){ // ...

but they're not hurting anything either.

So does this Fiddle duplicate your problem? If not, then the problem is in code other than what you've posted.