javascript - Passing JQuery Arrays to Nested Function -

i'm having problems dynamically adding row table using data stored in 2 arrays (categories , treatments). arrays fine, i've determined that.

when passing categories array new row displays select box reads [object:object], it's blank.

when pass second array it, shown below, console reads 'undefined not function'.

any hugely appreciated!

 // add row when button clicked  var counter = 1;    $('input.add').click(categories, treatments, function(){       counter++;              var newrow = '<tr><td><label for="category' + counter + '">category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';              $.each(categories, function(key, value) {          $('#category' + counter)          newrow += '<option value ="' + key + '">' + value + '</option>';       });        newrow += '</select></td><td><label for="treatment' + counter + '">treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';        $.each(treatments, function(key, value) {          $('#treatment' + counter)          newrow += '<option value ="' + key + '">' + value + '</option>';       });            newrow += '</select></td></tr>';             $('table.treatments').append(newrow);    }); }); 

the first parameter jquery .click() object, , you're trying pass 2 arrays.

this should work (remember check missing semi-colons):

// create object obj containing 2 arrays. $('input.add').click(obj = { categories: categories, treatments: treatments }, function () {     counter++;      var newrow = '<tr><td><label for="category' + counter + '">category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';      // use obj.     $.each(obj.categories, function (key, value) {         $('#category' + counter);         newrow += '<option value ="' + key + '">' + value + '</option>';     });      newrow += '</select></td><td><label for="treatment' + counter + '">treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';      // use obj.     $.each(obj.treatments, function (key, value) {         $('#treatment' + counter);         newrow += '<option value ="' + key + '">' + value + '</option>';     });      newrow += '</select></td></tr>';      $('table.treatments').append(newrow); }); 

demo

jquery .click()