JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
  </tr>
  <tr>
    <td>e</td>
  </tr>
  <tr>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
  </tr>
  <tr>
    <td>h</td>
  </tr>
</table>
<table id="table2">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr><tr>
    <td>8</td>
  </tr>
</table>

CSS

table {width:100%;}
td{ border: solid 1px silver;}
.ligne {background-color: red}

JavaScript

$( function(){
    $('#table1 tr').on('mouseenter', function(){
        ligne =  $('#table1 tr').index( $(this) );
        $('#table2 tr:eq('+ligne+')').addClass('ligne')})
                  .on('mouseleave', function(){
        ligne =  $('#table1 tr').index( $(this) );
        $('#table2 tr:eq('+ligne+')').removeClass('ligne')
       })
 
})