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

$('.list1 li').click(function () {
    $('.list2 li').removeClass("selected").eq($(this).index()).addClass("selected");
})