如何将不同的事件侦听器/处理程序分配给不同的元素

Question

我正在开发一个网站，其日历中包含可点击的特定日期。单击这些事件后，会弹出一个模式框，其中包含有关当天事件的更多信息。这个脚本显示了我是如何完成这个的（模态，它们的按钮和它们的关闭按钮存储为变量）：

<script>
var november01_modal = document.getElementById('november01_modal');
var november01_button = document.getElementById('november01');
var november01_close = document.getElementById('november01_close');

var november08_modal = document.getElementById('november08_modal');
var november08_button = document.getElementById('november08');
var november08_close = document.getElementById('november08_close');

var modals = new Array(november01_modal, november08_modal);
var buttons = new Array(november01_button, november08_button);
var closes = new Array(november01_close, november08_close);

var flag = true;
do {
    for (i in modals) {
        closes[i].onclick = function() {
            modals[i].style.display = "none";
        }
        buttons[i].onclick = function() {
            modals[i].style.display = "block";
        }
        flag = false;
    }
} while (flag == true);
</script>

我认为for循环会在点击相关按钮时弹出正确的模态框，但只会弹出november08_modal，无论是点击november01还是{ {1}}。我该如何解决这个问题？