'Show' answer on button press

I am creating a quiz for my webpage. I have a function working on the first question. Where a button will say "Show Solution". Once clicked, it will show the element. Currently the button doesn't change the button text to "Hide Solution" once it has been displayed.

The main problem is that iI have multiple questions. And when I click show solution it will show the first question. I know that the function is linked to that function, but I do not want to copy the function multiple times and change the IDs to answer1, answer2 etc...

function show_hide() {
  var myAnswer = document.getElementById('answer');

  var displaySetting = myAnswer.style.display;

  var quizButton = document.getElementsByClassName('quiz-button');

  if (displaySetting == "inline-block") {
    myAnswer.style.display = 'none';

    quizButton.innerHTML = 'Show Answer';
  } else {
    myAnswer.style.display = 'inline-block';
    quizButton.innerHTML = 'Hide Answer';
  }
}

.quiz-question {
  margin-bottom: 10px;
  text-align: left;
  font-size: 15px;
  color: #f44336;
  font-weight: 400;
}

.quiz-button {
  display: inline-block;
  text-decoration: none;
  color: #111;
  border: 1px solid #f44336;
  padding: 5px 5px;
  font-size: 13px;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.quiz-button:hover {
  color: #fff;
  background: #f44336;
  transition: 0.5s;
}

#answer {
  display: none;
}

<div class="part-content quiz">
  <h2>Chapter 1.1 End of Topic Quiz</h2>
  <p>
    The following quiz is meant to reinforce your understanding of the material presented above.
  </p>
  <!-- Question 1 Start -->
  <h4 class="quiz-question">1. What is a statement? </h4>
  <button onclick="show_hide()" class="quiz-button">Show Solution</button>
  <p id="answer">
    A <b>statement</b> is an instruction in a computer program that tells the computer to perform an action.
  </p>
  <br><br>
  <hr>
  <!-- Question 1 End -->

  <!-- Question 2 Start -->
  <h4 class="quiz-question">2. What is a function? </h4>
  <button onclick="show_hide()" class="quiz-button">Show Solution</button>
  <p id="answer">
    A <b>function</b> is several statements that are executed sequentially.
  </p>
  <br><br>
  <hr>

</div>

Here is one of the easiest solutions:

Change all onclick="show_hide()" to onclick="show_hide(this)"

Change your JS to:

<script>
         function show_hide(element)
         {
            var myAnswer = element.nextElementSibling;

            var displaySetting = myAnswer.style.display;

            var quizButton = element;

            if(displaySetting=="inline-block"){
                myAnswer.style.display = 'none';

                quizButton.innerHTML = 'Show Answer';
            }
            else
            {
                myAnswer.style.display = 'inline-block';
                quizButton.innerHTML = 'Hide Answer';
            }
         }
</script>

With this, you won't need to refer to the answer's ID anymore.

The "this" in the onclick attribute is referring to the button itself, and the "nextElementSibling" refers to the next element (which is the

containing the answer in your case) of the element (button). So actually var myAnswer means to get the next element of the button.

However, with this function, you need to make sure the button's next element is the answer element, else won't be working.

Also, the reason why directly var quizButton = document.getElementsByClassName('quiz-button'); won't work is because as you see, it gets multiple elements instead of one element. Different elements can have the same class. This will return an array of the elements having the class instead of the first element having the class.