question about re-using a function

question about re-using a function

I'm an OOP PHP guy who's pretty new to jQuery and JavaScript. Most of it makes sense but I am stuck on a script I am trying to use. It creates a dropdown list of states and countries, so that I don't have to rely on ugly form elements. It works in general but I have two questions about it:

1. when I create a second instance of the dropdown list, say "states" and then "countries" the selected value of the second list changes the value of the first, like they are not unique. How do I fix that? Do I need a separate function for each instance?

2. once I have these values, how do I get them into a hidden form element so that I can pass them off to PHP with $_POST?

Here's the code:

  1. $(document).ready(function() {
      createDropDown();

      $(".dropdown dt a").click(function(event) {
        event.preventDefault();
        var dropID = $(this).closest("dl").attr("id");
        $("#" + dropID).find("ul").toggle();
      });

      $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
          $(".dropdown dd ul").hide();
      });

      $(".dropdown dd ul a").click(function() {
        var dl = $(this).closest("dl");
        var dropID = dl.attr("id");
        var text = $(this).html();
        var source = dl.prev();
        $("#" + dropID + " dt a").html(text);
        $("#" + dropID + " dd ul").hide();
        $("#result").html(getSelectedValue(dropID));
      });

      function getSelectedValue(dropID) {
        return $("#" + dropID).find("dt a span.value").html();
      }

    });

    function createDropDown() {
      var selects = $("select.dropdown_value");
      var idCounter = 1;
      selects.each(function() {
        var dropID = "dropdown_" + idCounter;
        var source = $(this);
        var selected = source.find("option[selected]");
        var options = $("option", source);
        source.after('<dl id="' + dropID + '" class="dropdown"></dl>');
        $("#" + dropID).append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>');
        $("#" + dropID).append('<dd><ul></ul></dd>');
        options.each(function() {
          $("#" + dropID + " dd ul").append('<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>');
        });
        idCounter++;
      });
    }