JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list1">
	<li class="opt1">option1</li>
	<li class="opt2">option2</li>
	<li class="opt3">option3</li>
	<li class="opt4">option4</li>
	<li class="opt5">option5</li>
</ul>

<ul class="list2">
	<li class="opt1">option1-2</li>
	<li class="opt2">option2-2</li>
	<li class="opt3">option3-2</li>
	<li class="opt4">option4-2</li>
	<li class="opt5">option5-2</li>
</ul>

CSS

.list1, .list2 {float: left; margin: 0 20px 0 0;}
.list1 li {cursor: pointer;}
.list2 li {display: none;}
.list2 li.selected {display: block;}

JavaScript

for (var x = 1; x <= 5; x++){
    $(".list1 li.opt" + x).click(function() {$(".list2 li").removeClass("selected"); $(".list2 li.opt" + x).addClass("selected");});
}