creating a jQuery plugin having issues with when implemented multiple times on the same page

I have created a jQuery plugin that changes the generic select box into something pretty, however I am having a problem, when the plugin is used more than once on the page I run into problems, for example when I trigger the click event that slides the options of the dropdown down, all the selects on the page slidedown, how can I stop this?

MY CODE

    /***********
* Select-Me create pretty select lists using a <ul> inplace of the <select>
* Author: Simon Ainley
* Version: 0.0.1
***********/

    (function($){  
        $.fn.selectMe = function(options) {  
            var defaults = {
                select_text : null,
                remove_first_value : false,
                speed : 1000
            }

            var options = $.extend(defaults, options);

            return this.each(function() {
                //get an instance of the object we are working with
                var obj = $(this);
                var obj_name = obj.attr('name');
                obj.closest('form').append('<input type="hidden" id="dropdown_value" value="" name="'+obj_name+'"/>');
                var options = $("option", obj);
    开发者_JAVA百科            var replacement_list_heading = "<dl id='dropdown'><dt><span>"+defaults.select_text+"</span><a href=''>Go</a></dt></dl>";
                obj.closest('form').prepend(replacement_list_heading);
                var values_start = "<dd class='shadow_50'><ul></ul></dd>";
                $("#dropdown").append(values_start);
                if(defaults.remove_first_value == true) {
                    options.splice(0, 1);
                }
                options.each(function(){
                    $("#dropdown dd ul").append(
                        '<li><a href="#"><span class="option">' + 
                        $(this).text() + '</span><span class="value">' + 
                        $(this).val() + '</span></a></li>'
                    );
                });

                obj.remove();

                $('#dropdown li a').hover(function() {
                    $(this).parent('li').addClass('hover');
                }, function() { 
                    $(this).parent('li').removeClass('hover');
                });

                $("#dropdown dt a").click(function() {
                    $("#dropdown dd").slideToggle(defaults.speed);
                    return false;
                });

                $("#dropdown ul a").click(function(e) {
                    var value = $(this).find('span').text();
                    $(this).addClass('selected');
                    $("#dropdown_value").val(value);
                    $("#dropdown dt span").text($('.selected .option').text());
                    $("#dropdown dd").slideUp(defaults.speed);
                    $(this).removeClass('selected');
                    e.preventDefault();
                });
            });
        };  
    })(jQuery);

---

When attaching the event handlers like click, what you want to do is find the elements in context to your current obj, right now you have a very general selector i.e

$("#dropdown dt a").click(function() {

This will select all the dropdowns( btw you can't have two elements with the same id, looks like your plugin is creating a dl with id = "dropdown" for each select). What you want to do is select the dropdown in context to your current obj, so roughly maybe something like this

obj.closest('.dropdown dt a').click(function() {...

Do the same for the other events as well, use the selectors in context to the current element.