JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class='cl' data-gen='1'>One</div>
<div class='cl'  data-gen='5'>Two</div>
<div class='cl'  data-gen='6'>Three</div>
<br>
<div class='jl jl_1' style='display:none'>Alpha</div>
<div class='jl jl_1' style='display:none'>Andrew</div>
<div class='jl jl_1' style='display:none'>Christ</div>
<div class='jl jl_5' style='display:none'>Anto</div>
<div class='jl jl_5' style='display:none'>Brito</div>
<div class='jl jl_6' style='display:none'>Oyster</div>
<div class='jl jl_6' style='display:none'>Beta</div>

JavaScript

$(document).on('click','.cl',function(){
   $('.jl').hide().filter('.jl_' + $(this).data('gen') ).show();
})