cycle for, separate block of elements
<p>My problem is about building a cycle for.</p>

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

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

<p>and some javascript actions for some elements:  </p>

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

$('.arrowUp').click(function(){
    $('#thumbsContainer').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'});
    }
}
</code></pre>

<p>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)</p>

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

<p>Thanks</p>
