title: When I click a button, the corresponding answer show appear and the other answers should not be displayed
body: <p>I have ten of these buttons and answers with the only difference between each one being the answer:</p>
  
  <p>Example:</p>
  
  <pre><code>  &lt;div class="showhim"&gt; 
          &lt;button class="answerbtn" onclick="revealAnswersFunction()"&gt;Click/Tap To Reveal Answers:&lt;/button&gt;
      &lt;div class="showme" style="display:none"&gt;1D, 2C&lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div class="showhim"&gt; 
          &lt;button class="answerbtn" onclick="revealAnswersFunction()"&gt;Click/Tap To Reveal Answers:&lt;/button&gt;
      &lt;div class="showme" style="display:none"&gt;1A, 2D&lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div class="showhim"&gt; 
          &lt;button class="answerbtn" onclick="revealAnswersFunction()"&gt;Click/Tap To Reveal Answers:&lt;/button&gt;
      &lt;div class="showme" style="display:none"&gt;1B, 2B&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now what I want is that if the user clicks a button, the relevant answer will be revealed. Currently, it is doing this but there is a catch, it displays all answers which is not what I want. I want it so that dependent on which button I click, it only reveals the answer for that one and the other answers are not displayed.</p>
  
  <p>How can the code be manipulated to incorporate what I am guessing is some soft of loop to retrieve the button that has been clicked and display the corresponding answer and hide all the other answers?</p>
  
  <pre><code>var answers = document.getElementsByClassName("showme");
    var revealAnswers = document.getElementsByClassName("answerbtn");
  
  function revealAnswersFunction() {
  
    if (answers.style.display === "none") {
      answers.style.display = "inline-block";
    } else {
      answers.style.display = "none";
    }
  }
  </code></pre>