For loop won't work with addEventListener on querySelectorAll

I'm trying to create a popup box that appears with toggled CSS classes by targeting multiple iterations of "COACHBOX" and "BUTTON." To do this, I needed to use a for loop, but the addEventListener does not seem to be working. What am I missing?

This worked with the first iteration, however with each click on a proper 'for' loop, I think that all blocks will pop up. I am thinking of using an "if,else" statement involving the html ID's, but I'm not sure how to begin structuring that. Any suggestions would be super helpful.

var COACHBOX = document.querySelectorAll (".enlarge");
var BUTTON = document.querySelectorAll (".coach-button");

var OVERLAY = document.querySelector (".coach-container");
var LIGHTWINDOW = document.querySelector (".lightwindow");
var BOX = document.querySelector (".coach-box")

function coachBubble () {
  OVERLAY.classList.toggle ("-enable");
  LIGHTWINDOW.classList.toggle ("-enable");
  BOX.classList.toggle ("-enable");
}

for (var i=0; i<BUTTON.length; i++) {
  BUTTON[i].addEventListener('click',coachBubble,false);
}
for (var i=0; i<COACHBOX.length; i++) {
  COACHBOX[i].addEventListener('click',coachBubble,false);
}