cycle for, separate block of elements

My problem is about building a cycle for.

I have the following html block 3 times (class="listThumbsArrows_1", class="listThumbsArrows_2" and class="listThumbsArrows_3"), but with different images

 <div id="listThumbsArrows" class="listThumbsArrows_1">
    <div class="arrowUp">
        <img src="../_img/details_arrow_up.png" id="thumbUp" alt="">
    </div>
    <div class="arrowDown">
        <img src="../_img/details_arrow_down.png" id="thumbDown" alt="">
    </div>
    <div id="listThumbs">
        <div id="thumbsContainer" class="thumbsContainer">
            <div id="areaThumb" class="areaThumb_2">
                <div id="posThumb_1" class="posThumb">
                    <img src="../_img/detail_car.jpg" id="detail_img_1" alt="">
                </div>
                             ....................
            </div><!--areaThumb-->
          </div><!--thumbsContainer-->
    </div><!--end of listThumbs-->
</div><!--end of listThumbsArrows-->

and some javascript actions for some elements:

    $('.arrowDown').css({'visibility':'hidden'});
var cont=0;
var numThumbs = $('#areaThumb').length;
alert(numThumbs);

$('.arrowUp').click(function(){
    $('#thumb开发者_如何学CsContainer').animate({top: '-='+93+'px'}, {duration: 1000});
    cont++;
    arrowsThumbs();
});

$('.arrowDown').click(function(){
    $('#thumbsContainer').animate({top: '+='+93+'px'}, {duration: 1000});
    cont--;
    arrowsThumbs();
});

function arrowsThumbs(){
    if((numThumbs - 3)==cont){
        $('.arrowUp').css({'visibility':'hidden'});
    }else{
        $('.arrowUp').css({'visibility':'visible'});
    }

    if((numThumbs + cont)==(numThumbs)){
        $('.arrowDown').css({'visibility':'hidden'});
    }else{
        $('.arrowDown').css({'visibility':'visible'});
    }
}

When I had just one block, it worked nice, but when I added two more block it doesn't work how is supposed. For instace, if I'm in the second or third block and I click on arrowUp, it animates in the first block and I have an impression that it is counting 3 times more thumbs( the sum of all images of the three blocks)

Can anyone tell me how can individualize each block, and make all the javascript working for all block individually??

Thanks

You need to give your animation context. for example when you have this block

$('.arrowUp').click(function(){
    $('#thumbsContainer').animate({top: '-='+93+'px'}, {duration: 1000});
    cont++;
    arrowsThumbs();
});

your asking it to animate #ThumbsContainer but there are multiple ones. You might want to do something like

$('.arrowUp').click(function(){
    $(this).parent('#thumbsContainer').animate({top: '-='+93+'px'}, {duration: 1000});
    cont++;
    arrowsThumbs();
}); 

I would abstract it a bit more than that obviously, but i hope this gives you a better idea of why its not working