I'm trying to write a simple function to dynamically show or hide an element. I've written functions like this several times before and have never had an issue...I can't figure out what's going wrong here. I use Javascript to dynamically create the element, and then in the process of creating it and appending it to the page, I also write $(element).css("display", "none") so that it will be hidden on page load.

Now I'm writing an event listener function to display the hidden elements in response to a click event. When I click on the button with this event listener attached to it, the hidden elements DO appear (great!), but then when I click on the box again, they stay on the page. When I console.log out the function, I can see that it's always hitting the show condition and never hitting the hide condition...but I cannot figure out why after spending hours and hours looking at examples and trying different implementations.

To be clear, I did not assign display: none; in the static CSS stylesheet. I added it dynamically in the JS when I created the elements.

// Pass in an array of cards called "filterCards"

const toggleDisplayFilterCards = (filterCards) => {

// Loop through the cards, and for each card, grab the ID tag 
  for (let card of filterCards) {
    card = `#filter-card-container_${card.id}`;
    
   // If "display" style attribute = "none", show the div, else, hide it.
    if ($(card).css("display", "none")) {
      $(card).css("display", "")
      console.log("show");
    } else if ($(card).css("display", "")) {
      $(card).css("display", "none");
      console.log("hide");
    }
  }
};

Does anyone see a reason why this code would never hit the "hide" condition? I've inspected the element in the console once it's displayed on the page, and confirmed that the style attribute has been changed to "", so when I click the same button, I would expect the function to hit the "hide" condition.