arrays - Trying to generate a button-based interface in javascript -

i trying build interface javascript. interface grid of buttons. each row different musical instrument , on each column have rhythm pattern can trigger.

when user click on button, want change class background-color changes, telling user it's been activated.

the problem is, script targeting last button of row. when try force target specific button (which not last button), says button in "undefined".

pattern1 = ["clave 1",[1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0],"description"]; pattern2 = ["clave 2",[1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,0,1],"description"]; pattern3 = ["clave 3",[1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1],"description"]; pattern4 = ["clave 4",[1,0,1,0,0,1,0,1,0,0,1,0,1,0,0,1,0,1,0,0,1,0,1,0,0,1,0,1,0,0,1,0],"description"]; pattern5 = ["clave 5",[1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1],"description"]; pattern6 = ["clave 6",[1,0,1,0,1,0,0,1,0,1,0,1,0,0,1,0,1,0,1,0,0,1,0,1,0,1,0,0,1,0,1,0],"description"]; pattern7 = ["clave 7",[1,0,1,1,1,0,1,1,1,1,0,1,1,1,0,1,1,1,1,0,1,1,1,0,1,1,1,1,0,1,1,1],"description"]; pattern8 = ["clave 8",[1,0,1,0,1,0,1,0,1,0,0,1,0,1,0,1,0,1,0,1,0,0,1,0,1,0,1,0,1,0,1,0],"description"];  var pattern_collection = [pattern1, pattern2, pattern3, pattern4, pattern5, pattern7, pattern8];   function generate_buttons(instrument_id) {     (var key in pattern_collection)     {         //creating array of button each instrument         var button = new array();          //creating button label         var button_text;         button_text = document.createtextnode(pattern_collection[key][0]);          //creating button in dom         button[key] = document.createelement('div');          //by default, first pattern shown playing         if (pattern_collection[key]==pattern1)             button[key].classname = "isplaying_pattern_button";         else             button[key].classname = "notplaying_pattern_button";          button[key].onclick = function() {         //picking playing button change class not playing         var playing_button = document.queryselector("#"+instrument_id+" .isplaying_pattern_button");         playing_button.classname = "notplaying_pattern_button";         //this problem occurs: script targeting last button of row         button[key].classname = "isplaying_pattern_button";         };          button[key].appendchild(button_text);         var instrument_patterns = document.getelementbyid(instrument_id);         instrument_patterns.appendchild(button[key]);       } }