fadeOut and fadeIn for dropdowns - JQuery -

i working on project , have multiple drop downs populated using php. each dropdown given id of styledrop , container id of stylecont. reason, on first dropdown, 1 seems 'registered' code:

//this file used styling dropdowns $(document).ready(function () {     //close opened dropdown , open 1 selected:     $("#styledrop").click(function(){         var selected = $(this);         $("#stylecont").fadeout();         selected.closest("#stylecont").fadein();     });  });  

what suppose happen:

user click drop down , if other dropdown open, close, while 1 user selected opens. if click outside dropdown close.

the problem not work on of other dropdowns , on 1 works with, makes open , close right away.

i not sure why is. thoughts? ideas?

ids supposed unique.

your selector finding first 1 (by calling getelementbyid) , returning it.

use class instead , change selector appropriately use ".stylecont"

<select class="styledrop" ... > 

and then...

$(".styledrop")