Hide Multiple Dividers

Hide Multiple Dividers

Hi, I am new to JQuery and have this problem that has gotten me stuck. My HTML looks like this:

<div id="character" class="1">
Hey
</div>
<div id="character" class="2">
Hello
</div>
<div id="character" class="3">
Hi
</div>
<div id="character" class="4">
Charmed
</div>


And my JQuery like this:

<script type="text/javascript">                                         
    $(document).ready(function() {
   $("#character").hide();
   
});             



The problem is, only one of the dividers hides. How can I get them all to hide?

Thanks in advance![/code]