JSFiddle - React, Tailwind, and code Playground

HTML

<li id="arsiv_ulkeler_hide"><a href="javascript:void(0)">Hide</a></li>
<li id="arsiv_filmler_id"><a href="javascript:void(0)">Alphabet</a></li>
<li id="arsiv_ulkeler_id"><a href="javascript:void(0)">Countries</a></li>

<div class="arsiv-alt-basliklar"><ul>
<li class="film-cat-arch-alph"><a href="javascript:void(0)">A</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">B</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">C</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">D</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">E</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">F</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">G</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">H</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">I</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">J</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">K</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">L</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">M</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">N</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">O</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">P</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">Q</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">R</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">S</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">T</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">U</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">V</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">W</a></li><li class="film-cat-arch-alph"><a href="javascript:void(0)">X</a></li><li class="film-cat-arch-alph"><a...

CSS

.ulke-cat-arch{
	display: inline-block;
	/*float: left;*/
	width: 120px;
	text-align: center;
}

.film-cat-arch-alph{
	display: inline-block;
	width: 20px;
	text-align: center;
}
.film-cat-arch-alph:hover{
	outline: 1px solid #e2e2e2;
}

JavaScript

$('.ulke-cat-arch').hide();

$('#arsiv_ulkeler_id').on('click',function(){
    $('.arsiv-alt-basliklar ul li').hide();
    $('.ulke-cat-arch').css('display', 'inline-block');
});

$('#arsiv_filmler_id').on('click',function(){
    $('.arsiv-alt-basliklar ul li').hide();
    $('.film-cat-arch-alph').css('display', 'inline-block');
});


$('#arsiv_ulkeler_hide').on('click',function(){
    $('.arsiv-alt-basliklar ul li').hide();
});