javascript - 当我点击一个按钮时，会出现相应的答案，而其他答案不应显示

Question

我有十个这样的按钮和答案，每个按钮和答案之间的唯一区别是答案:

示例:

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1D, 2C</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1A, 2D</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1B, 2B</div>
</div>

现在我想要的是，如果用户单击按钮，就会显示相关答案。目前，它正在这样做，但有一个问题，它显示所有答案，这不是我想要的。我希望它能够根据我单击的按钮，仅显示该按钮的答案，而不会显示其他答案。

如何操作代码以合并我猜测的某种循环软来检索已单击的按钮并显示相应的答案并隐藏所有其他答案？

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";
  }
}

Answer 1

function revealAnswersFunction(e) {

var all =document.getElementsByClassName('showme');
for(let i=0;i<all.length;i++){
   all[i].style.display='none';
   }

var div = e.nextSibling.nextElementSibling;
div.style.display = "inline-block";

  
}

<div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1D, 2C</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1A, 2D</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1B, 2B</div>
</div>