Jquery – First jQuery plugin issues

jquerypluginspopulateselect

Hey guys, first off let me just say Im a jQuery noob! I want to make a simple plugin that auto-populates a html select element, it works fine on the first element but when I call it again to populate a second it appends nothing. Here are my calls in the ajax tab where #product and #new-category are the select elements:

$(function(){

    $("#product").popSelect("products");

    $("#new-category").popSelect("categories");

});

HTML:

><select id="product" name="product">
>     < option value="">Select Product</option>                 
></select >     
><select id="new-category" name="new-category">
>      < option value="">Select Category< /option>                  
></select >

And here is the Plugin:

(function(jQuery){
jQuery.fn.popSelect = function(table) {

    return jQuery(this).each(function(){            

        var obj = jQuery(this); 

        if(this.nodeName.toLowerCase() == 'select'){
            jQuery.getJSON("../app/modules/ajax/json.php", { table:table },
                function(data){                 
                    var options = '';           
                    jQuery.each(data, function(i,item){                                        
                        options += '<option value="' + item.id + '">' + item.title + '</option>';                   
                    });                 
                    obj.append(options);                
                });     
        };
    });
};
})(jQuery);

Strangely if I change the second function call
$("#new-category").popSelect("categories"); to
$("[id^='new-category']").popSelect("categories");
it then works fine, is there something wrong with my selector?

Thanks for any help!

Best Solution

I just answered a similar question, basically you can't have two elements with the same ID on the same page, it causes this exact issue. You'll have to use a class or change one of the IDs.