Tengo un par de elementos li importados de una API. Cuando se hace clic en uno de los elementos, ese elemento debe cambiar el color de fondo y permanecer en ese color hasta que se haga clic en otro elemento. En ese momento, el nuevo elemento cambiará de color y el antiguo volverá a su color original. Estaba tratando de hacer que esto funcionara de diferentes maneras, pero no puedo hacerlo funcionar. ¿Alguien puede ayudar?

 axios .get(showUrl + "?api_key=" + apiKey) .then((response) => { showsArray = response.data; showsArray.forEach((show) => { displayShows(show); }) }) .catch(error => { console.log(error); }) function displayShows(arr) { let show = document.createElement("li") show.classList.add("shows__table") let dateHeading = document.createElement('h5'); dateHeading.innerText = "Date"; let dateNum = document.createElement("h3"); dateNum.innerText = new Date(Number(arr.date)).toDateString(); let venueHeading = document.createElement('h5'); venueHeading.innerText = "Venue" let venueName = document.createElement('p'); venueName.innerText = arr.place; let locationHeading = document.createElement('h5'); locationHeading.innerText = "Location"; let locationName = document.createElement('p'); locationName.innerText = arr.location; let button = document.createElement('button'); button.innerText = "Buy Tickets"; // button.addEventListener('click', () => { // console.log("hit") // }) showsList.appendChild(show); show.appendChild(dateHeading); show.appendChild(dateNum); show.appendChild(venueHeading); show.appendChild(venueName); show.appendChild(locationHeading); show.appendChild(locationName); show.appendChild(button); } // first option: // let listItem = document.querySelectorAll(".shows__table"); // listItem.addEventListener('click', (e) => { // listItem.classList.toggle(".shows__table--active") // }) //second option : // document.querySelectorAll('.shows__table').addEventListener('click', changeColor); // function changeColor() { // this.style.backgroundColor = "red"; // return false // } //third option : // let listItem = document.querySelectorAll(".shows__table") // listItem.forEach((listItem) => { // listItem.addEventListener('click', (e) => { // listItem.classList.toggle(".shows__table--active") // }) // }) // 4th option // let listItem = document.querySelectorAll(".shows__table"); // for (let i = 0; i < listItem.length; i++) { // listItem[i].addEventListener('dblclick', function (e) { // e.preventDefault(); // listItem[i].classList.toggle("shows__table--active"); // console.log("clicked"); // }); // }