jquery - JavaScript - returning [object Object] -

i'm working on dynamic form appends groups of input fields page based on user input. because of additional functionality needs attached of these elements, need create them json objects. when test method 1 input element, element appended page, no problem. however, when try incorporate second element process, [object object] [object object] appended page instead.

here's gist...

//this problem function, triggered change function below function generateinput(sitenumber, x){      select = $("<select/>", {                 id: 'select'+sitenumber+''+x+'',                 name: 'select'+sitenumber+'['+x+']'                 }).append(list);      notes = $("<input/>", {                 type: 'text',                 id: 'notes'+sitenumber+''+x+'',                 name: 'notes'+sitenumber+'['+x+']'                 });       //if return 1 or other, no problem     return select + notes; };  $(document).on("change", ".number_select", function(){     sitenumber = $(this).parent().attr('data-site_number');     numberfound = $(this).val();      for(x = 1; x <= numberfound; x++){         this['inputarray' + sitenumber].push(generateinput(sitenumber, x));      };       $(this).parent().append(this['inputarray' + sitenumber]); }); 

i imagine problem way returning elements @ end of generateinput, i'm not sure of proper way handle this. basically, aiming select element text element sitting next it.

thanks much!

the + operator call tostring() method of 1 of terms if other string.

this not want, want instead merge jquery objects one

thus

return select + notes; 

could become (see jquery doc add):

return select.add(notes);