JSFiddle - React, Tailwind, and code Playground

HTML

<div id="objekt1">
    <ul id="listeNamen">
        <li><a href="#" class="infolink" data-show="john-info">John</a></li>
        <li><a href="#" class="infolink" data-show="mary-info">Mary</a></li>
    </ul>
</div>

<div id="john-info" class="infodiv">
    Info about John.
    <a href="#" class="infolink" data-show="john-info,john-moreinfo">More info</a>    
</div>

<div id="john-moreinfo" class="infodiv">
    More info about John.
</div>

<div id="mary-info" class="infodiv">
    Info about Mary.
    <a href="#" class="infolink" data-show="mary-info,mary-moreinfo">More info</a>    
</div>

<div id="mary-moreinfo" class="infodiv">
    More info about Mary.
</div>

CSS

div {
    border: 1px solid black;
}

.infodiv {
    display: none;
}

JavaScript

$("body").on("click", ".infolink", function (event) {
    var dataShow = $(this).attr("data-show").split(",");    
    $(".infodiv").each(function (index, div) {
        var divId = $(div).attr("id"),
            visible = dataShow.indexOf(divId) !== -1;
        $(div).toggle(visible);
    });
    event.preventDefault();
});