.animate jquery not working properly - html

Question

i am using the .animate function to animate a div inside another div.
it works fine, in the first block of divs in the same page, but it doesnt in the other divs.
any ideas on how to fix that?
here is the jsfiddle example http://jsfiddle.net/atseros/CkaHG/2/
$(document).ready(function() {
$("#displayscroll").hover(
//on mouseover
function() {
$(this).animate({
height: '+=170'
}, 'slow'
);
},
//on mouseout
function() {
$(this).animate({
height: '-=170px'
}, 'slow'
);
}
);
});

Answer 1

change id to other attribute.
change id to class sample:
html:
<div id="displaybox">
<div id="displayboximg">
<div class="displayscroll"> <!-- id to class -->
<div style="margin-top:50px; margin-left:20px; font-weight:bolder;"></div>
</div>
</div>
<div id="displayboxdetails">
details
</div>
</div>
<div id="displaybox">
<div id="displayboximg">
<div class="displayscroll"> <!-- id to class -->
<div style="margin-top:50px; margin-left:20px; font-weight:bolder;"></div>
</div>
</div>
<div id="displayboxdetails">
details
</div>
</div>
script :
$("div.displayscroll").hover( // <---- change to class
//on mouseover
function() {
$(this).animate({
height: '+=170' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$(this).animate({
height: '-=170px' //substracts 250px
}, 'slow'
);
}
);
css :
.displayscroll {
height:30px;
overflow:hidden;
opacity:0.82;
position:absolute;
left:0px;
right:0px;
bottom:0;
text-align:justify;
background-color:#4e81bc;
}