title: Dynamic Survey with Javascript
body: <p>I want to create a dynamic survery webpage with JavaScript.<br>
  I have 10 Questions which display types are set to "none" expect the first/actual questions displaytype is "block". Each question is a yes-no question. It's relevant which answer the user choose to see the next question.<br>
  I know how to build this static but I wanted a dynamic solution for this problem.<br>
  Can anybody help?<br>
  Here is a schema of my problem  </p>
  
  <p><a href="https://i.stack.imgur.com/g21X4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g21X4.png" alt="Survey schema"></a></p>
  
  <p>Example code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;10 Questions&lt;/title&gt;
    &lt;script&gt;
    ...
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;A Dynamic Questionaire.&lt;/header&gt;
      &lt;section&gt;
        &lt;article&gt;
          &lt;hgroup&gt;
            &lt;h1&gt;Questionaire&lt;/h1&gt;
            &lt;h2&gt;Anwer the questions in order as they appear.&lt;/h2&gt;
          &lt;/hgroup&gt;
          &lt;div id="Question1" style="display:block;"&gt;
            1. 
            &lt;button type="button" id="btnYes1"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo1"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question2" style="display:none;"&gt;
            2. 
            &lt;button type="button" id="btnYes2"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo2"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question3" style="display:none;"&gt;
            3. 
            &lt;button type="button" id="btnYes3"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo3"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question4" style="display:none;"&gt;
            4. 
            &lt;button type="button" id="btnYes4"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo4"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question5" style="display:none;"&gt;
            5. 
            &lt;button type="button" id="btnYes5"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo5"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question5" style="display:none;"&gt;
            6. 
            &lt;button type="button" id="btnYes6"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo6"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question5" style="display:none;"&gt;
            7. 
            &lt;button type="button" id="btnYes7"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo7"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question5" style="display:none;"&gt;
            8. 
            &lt;button type="button" id="btnYes8"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo8"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question5" style="display:none;"&gt;
            9. 
            &lt;button type="button" id="btnYes9"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo9"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Question5" style="display:none;"&gt;
            10. 
            &lt;button type="button" id="btnYes10"&gt;Yes&lt;/button&gt;
            &lt;button type="button" id="btnNo10"&gt;No&lt;/button&gt;
          &lt;/div&gt;
        &lt;/article&gt;
      &lt;/section&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>