jQuery hover problem

jQuery hover problem

Hey guys.

Just discovered jQuery yesterday, and i've played a lot around with it, it's the best. :D even though, i've encountered an issue with my script. This script is simply supposed to animate the height of the div to 200 pixels. I have two divs, that has attacted the same jQuery script to them, even though, the hover function only works on the first div?

Heres the code:

  1. <html>
    <head>
    <title>jQuery Example</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>

    body,th,td {
    color:#000;
    font-size:11px;
    font-family:verdana;
    }

    #button {
    float:left;
    width:150px;
    height:30px;
    text-align:center;
    border:1px solid #000;
    }

    </style>
    </head>
    <body>

    <div id='button'>Welcome</div><div id='button'>Welcome</div>
    <script>
    $("#button").mouseover(function() {
    $(this).stop().animate({height: "200px"}, 500);
    });
    $("#button").mouseout(function() {
    $(this).stop().animate({height: "23px"}, 500);
    });
    </script>
    </body>
    </html>