How to filter items in html?

function FilterCard(filter) {
  event.preventDefault();
  var classList = document.getElementsByClassName("collapse");
  if (filter === 'All') {
    for (let i = 0; i < classList.length; i++) {
      classList[i].className = "collapse show";
      var childCards = classList[i].firstElementChild.children;
      for (let j = 0; j < childCards.length; j++) {
        childCards[j].style.display = "inline-flex";
      }
    }
  } else {
    for (let i = 0; i < classList.length; i++) {
      if (classList[i].className === "collapse show") {
        var childCards = classList[i].firstElementChild.children;
        console.log(childCards);
        var count = 0;
        for (let j = 0; j < childCards.length; j++) {
          var card = childCards[j].firstElementChild.firstElementChild;
          if (card.innerText !== filter) {
            childCards[j].style.display = "none";
            count++;
          } else {
            childCards[j].style.display = "inline-flex";
          }
        }
        if (count == childCards.length) {
          classList[i].className = "collapse";
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
  .card-body .card {
    margin: 5px;
    width: 18rem;
  }
  
  .card {
    display: inline-flex;
    margin: 5px;
    width: 100%;
  }
</style>
<div class="container-fluid text-center">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Filter Card
                </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#" onclick="FilterCard('All')">All</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card1')">Card1</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card2')">Card2</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card3')">Card3</a>
    </div>
  </div>
</div>
<div class="container">
  <div id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Collapsible Group Item #1
                        </button>
        </h5>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card2</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Collapsible Group Item #2
                        </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card3</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Collapsible Group Item #3
                        </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse show" aria-labelledby="headingThree">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card3</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>

</html>