JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="table table-bordered table-hover table-trigger" id="tabela1">
  <tr id="el1">
    <td>Elemento1</td>
  </tr>
  <tr id="el2">
    <td>Elemento2</td>
  </tr>
  <tr id="el3">
    <td>Elemento3</td>
  </tr>
</table>
<table class="table table-bordered table-trigger-target" id="tabela2">
  <tr class="el1">
    <td>ReferenciaElemento1</td>
  </tr>
  <tr class="el3">
    <td>REferenciaElemento3</td>
  </tr>
  <tr class="el2">
    <td>ReferenciaElemento2</td>
  </tr>
  <tr class="el3">
    <td>REferenciaElemento3</td>
  </tr>
</table>

CSS

table#tabela1 tr:hover {
  background: #000;
  color: #fff;
  font-weight: 700;
}
#tabela1 tr:hover{
  cursor: pointer;
}

.table-trigger-target tr.hover{
  background: gold;
}

JavaScript

jQuery(function($) {
  $('.table-trigger tr')
    .on('mouseenter', function() {
      console.log(this);

    	$('.'+$(this).attr('id'), '.table-trigger-target')
        .addClass('hover')
    })
    .on('mouseleave', function() {
        $('.'+$(this).attr('id'), '.table-trigger-target')
          .removeClass('hover')
    })
});