If one element in an array is clicked then add a class to the same nth other array

I want an item to show when a link is clicked. I have made an array of all of the links.

I want to add the class "show" to an array of <div>s. Potentially if the solution makes more sense the <div>'s could be within the anchor, it doesn't matter they will overlay the screen.


<div class="grid-container">
    <a href="#"> <!-- lot's of <a>'s will make the array -->
        <div class="grid-item">
            <div class="grid-item--inner-container">
                <div class="grid-item--normal-content">
                        <div class="grid-item--heading">
                            <h2>Lending Creativity</h2>
                        <div class="grid-item--border">&nbsp;</div>
                </div><!-- end normal content -->
            </div><!-- Grid-item-inner -->
        </div><!-- Grid item -->

Second part of the HTML.

<div class="popup-container hidden"><!-- many -->
  <div class="grid-item--popup-content" id="lending-creativity--popup">
    <button class="close-button"><i class="fa fa-times"></i><span class="close-button--text-hidden">Close</span></button>


let griditems       = document.getElementsByClassName('grid-container')[0].getElementsByTagName('a');
let popupitems      = document.getElementsByClassName('popup-container');
let closebuttons    = document.getElementsByClassName('close-button');

document.addEventListener("DOMContentLoaded", function() {
    for (let i = 0; i < griditems.length; i++) {
        griditems[i].addEventListener("click", function () {
            popupitems[i].style.display = "flex";
    for (let i = 0; i < griditems.length; i++) {
        closebuttons[i].addEventListener("click", function () {
            closebuttons[i].style.display = "none";

I'm getting an error saying closebuttons is not defined. I guess I'm not 100% sure I'm doing this the right way either, is this the best way to solve this problem?