html - jQuery .css does not add display:block; for all divs -

hi jquery script not add display block same mane divs, first one.

js

$("#sidecontrol_container").mouseenter(function(){     settimeout( function(){     $('#packet_name').css('display','block');        },310); $( "#sidecontrol_container" ).animate({         width:"230px"     }, 300 );        }); $("#sidecontrol_container").mouseleave(function(){     $('#packet_name').css('display','none');     $( "#sidecontrol_container" ).animate({         width:"40px"     }, 300 );    }); 

html

<div id="sc_wraper">     <div id="packet_name">1</div> </div>  <div id="sc_wraper">     <div id="packet_name">1</div> </div> 

css

#packet_name{     height:40px;     width:190px;     float:right;     display:none; } 

it adds first div name packet_name <div id="packet_name" style="display:block;">1</div>

html result after mouseenter

<div id="sc_wraper">         <div id="packet_name" style="display:block;">1</div>     </div>      <div id="sc_wraper">         <div id="packet_name">1</div>     </div> 

the reason changing first 1 because jquery selects first instance of div name since id.

if want change multiple divs of same name need use div classes instead names. once update html use class names, same jquery , should work