javascript - JavaScriptでボタンベースのインターフェースを生成しようとしています

Question

javascriptでインターフェースを構築しようとしています。インターフェイスはボタンのグリッドです。各行は異なる楽器で、各列にはトリガーできるリズム パターンがあります。

ユーザーがボタンをクリックすると、そのクラスを変更して背景色が変化し、アクティブになったことをユーザーに伝えます。

問題は、スクリプトが常に行の最後のボタンをターゲットにしていることです。特定のボタン（最後のボタンではない）を強制的にターゲットにしようとすると、ボタンが「未定義」と表示されます。

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) {
    for (var key in pattern_collection)
    {
        //creating an array of button for each instrument
        var button = new Array();

        //creating the button label
        var button_text;
        button_text = document.createTextNode(pattern_collection[key][0]);

        //creating the button in the DOM
        button[key] = document.createElement('div');

        //by default, the first pattern is shown as playing
        if (pattern_collection[key]==pattern1)
            button[key].className = "isplaying_pattern_button";
        else
            button[key].className = "notplaying_pattern_button";

        button[key].onclick = function() {
        //picking the currently playing button to change its class to not playing
        var playing_button = document.querySelector("#"+instrument_id+" .isplaying_pattern_button");
        playing_button.className = "notplaying_pattern_button";
        //this is where the problem occurs: the script is always targeting the last button of the row
        button[key].className = "isplaying_pattern_button";
        };

        button[key].appendChild(button_text);
        var instrument_patterns = document.getElementById(instrument_id);
        instrument_patterns.appendChild(button[key]);


    }
}