title: Using the same function for different IDs to show elements
body: <p>so I am still a beginner in javascript and coding in general.
  I need to create a survey site from scratch for my studies.</p>
  
  <p>I want to have optional questions which are only displayed when the question before gets answered with yes by clicking on that radio button.
  Therefore my html for two questions looks like this:</p>
  
  <pre><code>&lt;!-- First Question radio button  --&gt;
  &lt;input onclick="showQuestion()" class="form-check-input" type="radio" name="rb_pg" value="Ja"&gt;
  
  &lt;div id="furtherQuestion" style="display:none"&gt;
      &lt;!-- another conditioned question 1 --&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Second Question radio button --&gt;
  &lt;input onclick="showQuestion()" class="form-check-input" type="radio" name="rb_radio" value="Ja"&gt;
  
  &lt;div id="furtherQuestion" style="display:none"&gt;
      &lt;!-- another conditioned question 2 --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The function showQuestion() to show the container looks like this:</p>
  
  <pre><code>function showQuestion() {
  var x = document.getElementById('furtherQuestion');
  if (x.style.display === "none") {
      x.style.display = "block";
  } else {
      x.style.display = "none";
  }
  }
  </code></pre>
  
  <p>Now when I click on the radio buttons "rb_pg" and "rb_radio" for the first and second question, only the first question switches between display none and block.</p>
  
  <p>I know that I am currently using the same ID "furtherQuestion" twice. This is where I need your help.</p>
  
  <p><strong>How can I pass the parameter from the ID "furtherQuestion" to the function, that I can reuse this function to show the div related to the question which gets answered with the radio button before?</strong>  </p>
  
  <p>I hope this is understandable.
  Thanks in advance.</p>