Entonces, por el momento, mi código solo elimina y agrega la clase "invisible" a los elementos que fueron seleccionados por su ID. Quiero seleccionar ciertos elementos que están en la matriz de "datos". ¿Hay alguna manera de seleccionar una selección completa de elementos en función de si tienen una determinada clase de CSS?

 let editBtn let deleteBtn //Declares element variables function htmlHandle(data) { //takes in the data that was fetched from my server and maps it postsContainer.innerHTML = data.map(item => { return ` <div class="post-container"> <a class="a" href='/'><h3 class="author">${item.author}</h3></a> <div class="date">${item.date.toLocaleString()}</div> <button id="optionsBtn" class="options-btn"><i class="fas fa-ellipsis-v" style="color: gray;"></i></button> <button id="editBtn" class="inside-btn invisible">Edit</button><button id="deleteBtn" class="inside-btn invisible">Delete</button> <br> <button class="inside-btn invisible">Delete</button> <p class="body-text">${item.body}</p> </div> ` }).join('') } fetch('/api/data') .then(res => res.json()) .then(data => { data.sort(function(a,b){ return new Date(b.date) - new Date(a.date); }) htmlHandle(data) editBtn = document.querySelector("#editBtn") deleteBtn = document.querySelector("#deleteBtn") let activeTwo = false document.addEventListener("click", e => { if (e.target.classList.contains("options-btn")) { //Selects the elements with the "options-button" through the "e" parameter if (!activeTwo) { editBtn.classList.remove("invisible") deleteBtn.classList.remove("invisible") activeTwo = true } else { editBtn.classList.add("invisible") deleteBtn.classList.add("invisible") activeTwo = false } } }) })

En este momento, todo lo que hace este código es eliminar y agregar la clase invisible solo para el primer elemento de la matriz. Esto tiene sentido ya que fueron seleccionados por su ID.