Beginner Question: Trying to dupe inputs/textareas with variables

[clickHere]

Hello all,
I am currently trying to add a button, that when I click it - a list of questions appear (with textareas), every textarea has his own ID and I'm trying to get all of the answers printed into one form.

<h5>QUESTION BULK 1/h5>
    <div id="question1">
      <h4">#1</h4> <p>Relative name?: <input id="a_relative">
      <p>Age: <input id="a_age"> <p>What makes him your relative?: <input id="a_what">
    </div>

I'm trying to get a button to make it add that bulk of questions, so the user can add the relevant amount.
e.g:

<button onClick="clickMe()">Add</button>

All of the data from the inputs should be later taken and put into a certain "answer sheet" form.
e.g:

function clickMe() {
  var relative = document.getElementById("a_relative").value;
  var age = document.getElementById("a_age").value;
  var what = document.getElementById("a_what").value;
  var generatedForm = " Name: "+relative+"\n\
  Relative age: "+age+"\n\
  Reason he/she is your relative: "+what+".";

  document.getElementById("X").value = clickMe // put everything in a textarea of example, 
}

[alan.davies]

Few ways to do this. You can hide the questions and then show them with a button click. You can get questions from the server via Ajax and insert them. If it's just bog standard questions a hide and show may be best.

[deutnukem]

further to Alan's post, I do something similar. put the content you want to appear in a wrapper and give it a class with display: none;
Also when using javascript to interact with classes it is best to have a separate calss prefixed with js- just so you know it is for js and it wont be inadvertantly changed later.

e.g.

-- CSS --
.is-hidden
{
    display: none;
}

-- HTML --
<div class="js-question-one is-hidden"> <!-- content you want to appear here... --> </div>

-- JS --
function ClickMe() {
    let target = document.querySelector('.js-question-one');
    target.classList.remove('is-hidden');
}

[gentlemedia]

There's also a W3C standard <detrails> element for this, but no IE and even Edge support yet.... dealbreaker!
https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/

[alan.davies]

You gotta love MS :( from innovators to dead-weight arse-draggers. Can't they just go bust already? Heh.