[Solved] If Else Show Hide Div

[DoxramosPS]

I'm trying to get an option in my vote store that I'm working on to show/hide pet information based off an else if statement.
My Selection base is as follows.

<select onchange="optionCheck()" id="pets" name ="pets">
        <?php
        $get_vote_pets = mysql_query("SELECT * FROM $server_db.pet_rewards WHERE price =10");
                while($results = mysql_fetch_array($get_vote_pets)){
                echo '<option value="'.$results['id'].'">'.$results['name'].' '.$results['id'].'</option>';
                }
                ?>
        </select>

Underneath that I then have my Divs

<div id="monk1" style=visibility:hidden>Text A</div>
<div id="monk2" style=visibility:hidden>Text B</div> 

And then in the header of my file I have

<script type="text/javascript">
    function optionCheck(){
        var option = document.getElementById("pets").value;
        if(option == "67"){
            document.getElementById("panda1").style.visibility ="visible";
            document.getElementById("panda2").style.visibility ="hidden";
        }
        if(option == "66"){
            document.getElementById("panda2").style.visibility ="visible";
            document.getElementById("panda1").style.visibility ="hidden";
        }
    }
</script> 

The ID for the first and second item in the database are 66 and 67 and having them show in the option selection it shows the id as such.
Yet when I try to run the page the divs remain hidden no matter what the selection is.
If anyone could help please do. If you need more info need only ask. I think this should cover it though.

document.getElementById("panda2").style.visibility ="visible";
document.getElementById("panda1").style.visibility ="hidden";
Should have been monk1 and monk2; I noticed as soon as I posted. Flame away >.>