How to assign different event listeners/handlers to different elements

Question

I'm working on a website that has a calendar with certain dates that are clickable. When those events are clicked, a modal box pops up with more information about the events on that day. This script shows how I'm trying to accomplish this (where the modals, their buttons, and their close buttons are stored as variables):

<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>

I thought that the for loop would make the right modal box pop up when its associated button is clicked, but only the november08_modal ever pops up, whether I click november01 or november08. How do I fix this?