I have a problem with jquery effects on few blocks.
Mouseenter and mouseleave work only on the first div block while on all others it doesn't.

Here is the JS:

```
 $(document).ready(function() {

     $('#mainbox').mouseenter(
         function () {
           $('#infobox').fadeIn();
         }); 
     $('#mainbox').mouseleave(
         function () {
           $('#infobox').fadeOut();
         });

   });

```

And also blocks:

```
<div id="mainbox"><div id="infobox" style="display: none;">first block - it works on      this one</div></div>

<div id="mainbox"><div id="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div id="mainbox"><div id="infobox" style="display: none;">3rd block - it doesn't work</div></div>

```

Do you guys have any ideas what the problem is?