JSFiddle - React, Tailwind, and code Playground

HTML

<span class="player-1 player-trigger">Show player 1</span> | <span class="player-2 player-trigger">Show player 2</span> | <span class="player-2 player-trigger">Show player 3</span>
<br />
<br />
<hr />
<br />
<div class="mediaplayer" id="mediaplayer-1">Das ist das eine player hier</div>
<br />
<br />
<div class="mediaplayer" id="mediaplayer-2">Das ist das eine player hier</div>
<br />
<br />
<div class="mediaplayer" id="mediaplayer-3">Das ist das eine player hier</div>

CSS

.player-trigger {border-bottom: 1px dotted black; cursor: pointer;}
.mediaplayer {width: 300px; background: black; color: white; font-weight: bold; font-size: 20px; padding: 30px 0px; text-align: center; display: none;}

JavaScript

$('.player-trigger').click(function () {
    var player_id = $(this).removeClass('player-trigger').attr('class').replace('player-', '');
    $("#mediaplayer-" + player_id).show();
});