How to show the items that have the same id as the button when button is clicked?

I use filters that are taken from my database. When the filter is clicked it has to filter on the elements that have the same id as the buttons.

Right now I did the filter in the following way. But that’s not the way it should be.

How can I just show the items that have the same ID as the button when it’s clicked?

<div id="myDropdown2" class="dropdown-content">
          <input type="button" id='all' value='All'>
          <?php
          $query = 'SELECT * FROM `imslp_instruments` WHERE 1';
          $result = $conn->query($query);
          if ($result->num_rows > 0) {
              while ($row = $result->fetch_assoc()) {
                  $thisInstrument = $row['imslp_instruments'];
                  echo "<input type='button' id='btn' value='$thisInstrument'/>";
              }
          }
          ?>
</div>

const sheets = document.querySelectorAll('.shop-card');

let knop = document.querySelectorAll('#btn');

knop.forEach((btn) =>
  btn.addEventListener('click', (e) => {
    e.target.classList.toggle('active');
    liveSearch2(e.target.value);
  }),
);
function liveSearch2(button) {
  for (var i = 0; i < sheets.length; i++) {
    if (sheets[i].textContent.toLowerCase().includes(button.toLowerCase())) {
      sheets[i].classList.remove('is-hidden');
    } else {
      sheets[i].classList.add('is-hidden');
    }
  }
}