JSFiddle - React, Tailwind, and code Playground

HTML

<div class="movable opcao-1">
    <div class="movable-show">Aparece aqui A</div>
    <div class="movable-list">
        <span>#Primeiro A</span>
        <span>#Segundo A</span>
        <span>#Terceiro A</span>
        <span>#Quarto A</span>
        <span>#Quinto A</span>
    </div>
</div>

<div class="movable opcao-2">
    <div class="movable-show">Aparece aqui B</div>
    <div class="movable-list">
        <span>#Primeiro B</span>
        <span>#Segundo B</span>
        <span>#Terceiro B</span>
        <span>#Quarto B</span>
        <span>#Quinto B</span>
    </div>
</div>

CSS

.movable{}
.movable > .movable-show{padding: 3% 0; text-align: center; background: #dedede;}
.movable > .movable-list > * {cursor: pointer; width: 100%; display: block; text-align: center; padding: 2% 0; margin: .5% 0; border: 1px solid #000; border-radius: 1em;}
.movable > .movable-list > *:nth-child(even){background: #ffd;}
.movable > .movable-list > *:nth-child(odd){background: #ddf;}
.movable > .movable-list > *:first-child {background: #135; color: #fff;}

.opcao-1, .opcao-2{width: 48%; float: left; margin: 0 1%;}

JavaScript

jQuery(".movable > .movable-list > *").click(function(){
    var $this = jQuery(this); // Elemento que clicou
    var $parent = $this.parents(".movable"); // Elemento Pai do que clicou
    var $palco = $parent.find(".movable-show"); // Elemento palco do elemento que foi clicado
    $palco.empty().append($this.html());    
});