JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div id="choice1" class="select" data-value="">
    <div class="selected">
      <span class="value">...</span>
      <span class="arrow" onclick="toggle('choice1');">V</span>
    </div>
    <div class="choices" style="display:none">
      <p class="option">A</p>
      <p class="option">B</p>
      <p class="option">C</p>
      <p class="option">D</p>
      <p class="option">E</p>
      <p class="option">F</p>
    </div>
  </div>

  <div id="choice2" class="select" data-value="">
    <div class="selected">
      <span class="value">...</span>
      <span class="arrow" onclick="toggle('choice2');">V</span>
    </div>
    <div class="choices" style="display:none">
      <p class="option">A</p>
      <p class="option">B</p>
      <p class="option">C</p>
      <p class="option">D</p>
      <p class="option">E</p>
      <p class="option">F</p>
    </div>
  </div>

  <p id="ans">This is some crazy text !!!</p>
  <input type="button" onclick="compute();" value="Reveal">

</body>

CSS

.select {
  border: 1px solid black;
  width: 100px;
}

.selected {
  width: 100%;
}

.choices {
  width: 100px;
  border: 1px solid black;
  position: absolute;
  z-index: 1;
  background-color: white;
}

.arrow {
  border: 1px solid black;
  float: right;
}

.arrow:hover {
  cursor: pointer;
}

.option {
  margin: 0px;
  padding: 0px;
}

.option:hover {
  cursor: pointer;
  color: white;
  background-color: black;
}

JavaScript

function toggle(select) {
  choices = document.getElementById(select).getElementsByClassName("choices");

  if (choices[0].style.display != "none")
    choices[0].style.display = "none";
  else
    choices[0].style.display = "block";
}
/******************************************************************************************************/
function hasClass(element, className) {
  return element.className.match(new RegExp("(^|\s+)" + className + "(\s+|$)"), "g");
}
/******************************************************************************************************/
function clickAnywhere(event) {
  id = "";

  if (hasClass(event.target, ("arrow"))) {
    parent = event.target.parentNode;
    while (!hasClass(parent, "select")) parent = parent.parentNode;
    id = parent.id;
  }

  selects = document.getElementsByClassName("select");

  for (i = 0; i < selects.length; i++) {
    if (selects[i].id != id) selects[i].getElementsByClassName("choices")[0].style.display = "none";
  }
}
/******************************************************************************************************/
function compute() {
  selects = document.getElementsByClassName("select");
  ans = "";

  for (i = 0; i < selects.length; i++) {
    ans = ans + selects[i].getAttribute("data-value");
  }

  document.getElementById("ans").innerHTML = ans;
}
/******************************************************************************************************/
function selectOption(event) {
  select = event.target.parentNode;
  while (!hasClass(select, "select")) {
    select = select.parentNode;
  }

  select.setAttribute("data-value", event.target.innerHTML);
  select.getElementsByClassName("value")[0].innerHTML = "*";
}
/******************************************************************************************************/

document.getElementsByTagName("html")[0].addEventListener("click", clickAnywhere);
window.onload = function() {
  options = document.getElementsByClassName("option");
  for (i...