Q:

show/hide row on hovering column other row with universal(dynamic) code? 

On a web page I have five columns inside a row(.toplvl).  Each has their own class like .tli-1, .tli-2, .tli-3, .tli-4, .tli-5
So column three has the class .tli-3
Below the .toplvl row I have 5 more rows which are called .tlcr-1, .tlcr-2, .tlcr-3, .tlcr-4, .tlcr-5
So row three has the class .tlcr-3
What do I want to achieve
When hovering over .tli-1 it should display .tlcr-1 and stay open as long as the mousepointer is on either .tli-1 or .tlcr-1
This same logic goes for all the other columns. 
It needs to be dynamic
The amount of columns and rows can differ.  At one time it can be 3 but it could also be 50.  The classes will remain the same apart from the number part.  If their where for instance 50 then the last column would be called .tli-50 and the last row tlcr-50
My current code
Which works but needs me to duplicate it for over 50 times and manually changing the numbers.  There must be a better way for this. 
$( ".tli-2" ).mouseenter(function() {
  $( ".tlcr-2" ).css('display', 'block');
})
$( ".tli-2" ).mouseleave(function() {
  $( ".tlcr-2" ).mouseenter(function() {
      $( ".tlcr-2" ).css('display', 'block');
      $( ".tlcr-2" ).mouseleave(function() {
        $( ".tlcr-2" ).css('display', 'none');
      })
  })
  $( ".tlcr-2" ).css('display', 'none');
});

A Fiddle for better understanding of the structure
https://jsfiddle.net/3naxLfm6/
Thanks for helping
Everyone who is going to reply.  Thank you very much for taking the time.  I would really appreciate a solution with a working fiddle but off course is any suggestion absolutely welcome.  Furthermore, if anything is unclear about the question please allow me to make it better before down voting. 

A:

If I understand you correctly, you have some things you can do. 

Listen once for mouseenter and mouseleave
On mouse enter, first, hide() all the rows.  Then, get the hovered item's index and show() the corresponding (by eq()) row. 

$('.column').on('mouseenter', function() {
  $('.tlcr').hide();
  const index = $(this).index('.column');
  $('.tlcr').eq(index).show();
});
.row {
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-between;
  width:100%;
  min-height:50px;
}
.tlcr {
  display: none;
}
.column {
  text-align:center;
}
.w20 {
  width:20%;
}
.tli-1, .tlcr-1 {background:red;}
.tli-2, .tlcr-2 {background:blue;}
.tli-3, .tlcr-3 {background:green;}
.tli-4, .tlcr-4 {background:purple;}
.tli-5, .tlcr-5 {background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row toplvl">
  <div class="column w20 tli-1">Item 1</div> 
  <div class="column w20 tli-2">Item 2</div> 
  <div class="column w20 tli-3">Item 3</div> 
  <div class="column w20 tli-4">Item 4</div> 
  <div class="column w20 tli-5">Item 5</div> 
</div>
<div class="row tlcr tlcr-1">Content 1</div>
<div class="row tlcr tlcr-2">Content 2</div>
<div class="row tlcr tlcr-3">Content 3</div>
<div class="row tlcr tlcr-4">Content 4</div>
<div class="row tlcr tlcr-5">Content 5</div>

