JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main">
  <!--Ebene 1-->
  <div>
    <div id="antwort1">Antwort 1</div>
    <div id="antwort2">Antwort 2</div>
  </div>
  
  <!--Ebene 2-->  
  <!--Wenn Antwort 1 genommen wurde-->
  <div>
    <div id="antwort1_1">Antwort 1_1</div>  
    <div id="antwort1_2">Antwort 1_2</div>
  </div>  
  <!--Wenn Antwort 2 genommen wurde-->
  <div>
    <div id="antwort2_1">Antwort 2_1</div>  
    <div id="antwort2_2">Antwort 2_2</div>
  </div>
  
  
  <!--Wenn Antwort 1 > Antwort 1 genommen wurde-->
  <div>
    <div id="antwort1_1_1">Antwort 1_1_1</div>  
    <div id="antwort1_1_2">Antwort 1_1_2</div>
  </div>  
   <!--Wenn Antwort 1 > Antwort 2 genommen wurde-->
  <div>
    <div id="antwort1_2_1">Antwort 1_2_1</div>  
    <div id="antwort1_2_2">Antwort 1_2_2</div>
  </div>  
  <!--Wenn Antwort 2 > Antwort 1 genommen wurde-->
  <div>
    <div id="antwort2_1_1">Antwort 2_1_1</div>  
    <div id="antwort2_1_2">Antwort 2_1_2</div>
  </div>
  <!--Wenn Antwort 2 > Antwort 2 genommen wurde-->
  <div>
    <div id="antwort2_2_1">Antwort 2_2_1</div>  
    <div id="antwort2_2_2">Antwort 2_2_2</div>
  </div>
  
</div>

CSS

.main > div {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  display: none;
}


.main > div > div {
  height: 200px;
  width: 200px;
  background: lightgrey;
}

.main > div:first-child {
  display: flex;
}

JavaScript

$(".main > div > div").click(function () {
	var getID = $(this).attr("id");
	var sub = getID.substring(getID.length - 1);
  
  $("div[id^=antwort]").parent().css("display", "none");
  $("#" + getID + "_" + sub).parent().css("display", "flex");
});