Using toggle function to highlight one element when clicked

I have a couple of li elements imported from an API. When clicked on one of the elements, that element should change background color and stay that color until another element is clicked on. At that point the new element will change color and the old one go back to its original color. I was trying to make this work a few different ways but can’t make it work. Can anyone help? thank you.

       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");
 //     });
  // }