Simple question I can't find the answer to

A Pen by Trenton (codepen.io)

I wrote up some simple code to make it easy to explain.

so, I just have some divs that have a click event that toggles a class to add a border onto the div.

I’m just trying to figure out how to only be able to have one selected at a time. I only want to be able to have one div selected with a border at a time. I don’t really know how to approach this.

Simply put, you need to to remove the class from all the other divs when you add it to the clicked one.

Yeah, I’m just having a hard time figuring out how to remove it from the others without affecting the one that is currently being clicked.

e.target and div both work on the current target.

Can you share some of your attempts?

containerDivArray.forEach(div => {
    div.addEventListener('click', (e) => {
        e.currentTarget.classList.toggle('border-on-click')  
        if (div !== e.currentTarget) {
            containerDivArray.forEach((item) => {
                item.classList.remove('border-on-click')
            })
        }
    })
});

this is the farthest I’ve gotten but nothing has worked.

You’re on the right track! I think your inner loop is in the wrong place. You probably need to loop over every element any time one is clicked.