Duplicating Dynamic Dropdown Menus with jQuery

I currently have a dynamic dropdown menu that populates the one select form once the other has been selected, it looks something like this.

<script language="javascript" type="text/javascript开发者_如何学Go">

function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getState(countryId) {      

        var strURL="http://mydomain.com/findClass.php?department="+countryId;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('statediv').innerHTML=req.responseText;                     
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
    }



</script>

Everything works fine, but when I'm trying to duplicate the dropdown forms, it gets buggy. See my screen shot here,

Once the second form has been displayed and the user picks another department, this affects the form above it (the original). I understand why this is happening, because they all have the same ID. I just don't know how to fix the problem so when a user selects a department from form 2, it doesn't affect anything that has already been done to form 1.

Also, here is what my dropdown forms look like.

<select name="department" onChange="getState(this.value)" style="float:left;">
    <option value="">Select Department</option>
    <? while ($row = mysql_fetch_assoc($res)) { ?>
    <option value="<? echo $row['id']; ?>"><? echo $row['short']. " - " .$row['full']; ?></option><? } ?>
</select>
<div id="statediv">
<select name="course" style="float:left;">
    <option>---------------</option>
        </select></div>

Hope this makes sense.

Here's the jQuery

(function($) {

    $.fn.relCopy = function(options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function() {

            // set click action
            $(this).click(function(){
                var rel = $(this).attr('rel'); // rel in jquery selector format             
                var counter = $(rel).length;

                // stop limit
                if (settings.limit != 0 && counter >= settings.limit){
                    return false;
                };

                var master = $(rel+":first");
                var parent = $(master).parent();                        
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);

                //Remove Elements with excludeSelector
                if (settings.excludeSelector){
                    $(clone).find(settings.excludeSelector).remove();
                };

                //Empty Elements with emptySelector
                if (settings.emptySelector){
                    $(clone).find(settings.emptySelector).empty();
                };                              

                // Increment Clone IDs
                if ( $(clone).attr('id') ){
                    var newid = $(clone).attr('id') + (counter +1);
                    $(clone).attr('id', newid);
                };

                // Increment Clone Children IDs
                $(clone).find('[id]').each(function(){
                    var newid = $(this).attr('id') + (counter +1);
                    $(this).attr('id', newid);
                });

                //Clear Inputs/Textarea
                if (settings.clearInputs){
                    $(clone).find(':input').each(function(){
                        var type = $(this).attr('type');
                        switch(type)
                        {
                            case "button":
                                break;
                            case "reset":
                                break;
                            case "submit":
                                break;
                            case "checkbox":
                                $(this).attr('checked', '');
                                break;
                            default:
                              $(this).val("");
                        }                       
                    });                 
                };

                $(parent).find(rel+':last').after(clone);

                return false;

            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);


<script type="text/javascript">
$(function(){
  var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false"><img src="images/bullet_minus.png" /></a>';
$('a.add').relCopy({ append: removeLink});  
});


</script>

---

This may not be the perfect solution but it works.what you can do is pass the id of the div in getState function. something like getState(countryid,divid)

and in the red.readystate function you can do something like

req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById(divid).innerHTML=req.responseText;                     
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           

im not sure what exactly your jquery script is doing but you can convert all the XMLHTTP reruests to jQuery which is much simple and easy.