JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div id="names">
  <h3>Найдено</h3><br>
  <div class="name1">name 1</div>
  <div class="name2">name 2</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>
      </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>
      </table>
    </td>
  </tr>
</table>

CSS

.hide {
  display: none;
}

.show {
  display: table-row;
}

JavaScript

$('#names div').click(function() {

  var classname = $(this).attr('class');
  var h = $('.tabl');
  var s = h.find(".position[data-id='"+classname+"']");
  
  h.find('tr').addClass('show');

  	if(s.hasClass('show')){
    	s.removeClass('show');
    	s.addClass('hide');
    } else {
    	s.removeClass('hide');
    	s.addClass('show');
    }
        
  
  
});