JSFiddle - React, Tailwind, and code Playground

HTML

<div id="names">
    <h3>Найдено</h3><br>
    <div class="toggle" data-id="name1">name 1</div>
    <div class="toggle" data-id="name2">name 2</div>
    <div class="toggle" data-id="name3">name 3</div>
</div>


<table>
  <tr>
    <td valign="top">
      <table id="table" class="tabl">
        <tr>
          <th>Никнейм</th>
          <th>дата</th>
        </tr>
        <tr class="position" data-id="name1">
          <td>name 1</td>
          <td>date 1</td>
        </tr>
        <tr class="position" data-id="name2">
          <td>name 2</td>
          <td>date 2</td>
        </tr>
        <tr class="position" data-id="name1">
          <td>name 1</td>
          <td>date 1</td>
        </tr>
        <tr class="position" data-id="name3">
          <td>name 3</td>
          <td>date 3</td>
        </tr>
      </table>
    </td>
    <td valign="top">
      <table id="tablem" class="tabl">
        <tr>
          <th>Никнейм</th>
          <th>позиция</th>
        </tr>
        <tr class="position" data-id="name1">
          <td>name 1</td>
          <td>position 1</td>
        </tr>
        <tr class="position" data-id="name2">
          <td>name 2</td>
          <td>position 2</td>
        </tr>
        <tr class="position" data-id="name2">
          <td>name 2</td>
          <td>position 2</td>
        </tr>
        <tr class="position" data-id="name3">
          <td>name 3</td>
          <td>position 3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CSS

.hide {
  display: none;
}

.show {
  display: table-row;
}

JavaScript

$(document).on('click', '#names .toggle', function(){
    var dataID = $(this).attr('data-id');
    filterItems();
});


function filterItems() {

  var classSelectors = $(".selected").map(function() {
    return this.id;
  }).toArray();
  
	$('table tr[data-id]').hide();
  $('table tr[data-id]').filter(classSelectors).show();
  
  }