jQuery fade e opacity su 2 div

[-AA-]

ho questo "pezzo" di codice

<script type='text/javascript'>
$(document).ready(function(){
$("#first").hover(
	function() {
	$(this).stop().animate({"opacity": "1"}, "slow");
	},
	function() {
	$(this).stop().animate({"opacity": "0"}, "slow");
	}); 
});
</script>

e... il suo html

[*]
<div id="first">testo per l'evento</div>
<div id="second">[img]upload/eventi/01.jpg[/img]</div>

[*]
<div id="first">testo per l'evento</div>
<div id="second">[img]upload/eventi/01.jpg[/img]</div>

[*]
<div id="first">testo per l'evento</div>
<div id="second">[img]upload/eventi/01.jpg[/img]</div>

[*]
<div id="first">testo per l'evento</div>
<div id="second">[img]upload/eventi/01.jpg[/img]</div>

I problemi sono che :

lo script in questione funziona solo sul primo LI ..
Inoltre il DIV FIRST al loadin della pagina non dovrebbe vedersi (sono 2 div uno sopra l'altro)

qualche consiglio?