Adding new div every time button is clicked

Question

I am trying to create a page where the user can create a question form where they add questions by themselves and change the type of questions they want to ask. Pretty much the same as Google Forms. Based on the type of question, a box should appear beneath the question that is created. When I try to do this, the box only appears on the last question, so i believe it is overwritten every time a new question is added. Any tips on how to create box beneath every question?

 function createQuest() { number++; chooseTime(); outputQuestion += '<div id="question' + number + '>'; outputQuestion += '<p id="k"></p>'; outputQuestion += '<h2>Question' + number + '</h2>'; outputQuestion += '<form name="choose">'; outputQuestion += '<textarea rows="1" cols="30" id="question' + number + '" name="text" placeholder="Question"></textarea>'; outputQuestion += '<select id="sel' + number + '">'; outputQuestion += '<option id="' + number + '" id="TEXT" onclick()>Text</option>'; outputQuestion += '<option id="' + number + '" id="SLIDER">Rating</option>'; outputQuestion += '</select>'; outputQuestion += '<ul id="list-quest' + number + '">'; outputQuestion += '</ul>'; outputQuestion += '</form>'; outputQuestion += '</div>'; $("#list-create-doc").html(outputQuestion); textChosen(number); } var outputQuest1 = ""; function textChosen(nr) { outputQuest1 = ""; outputQuest1 += '<div class="textbox" id="txt">'; outputQuest1 += '<textarea rows="1" cols="30" placeholder="Answered with text"></textarea>'; outputQuest1 += '</div>'; var whereAdd = "#list-quest" + nr; console.log(whereAdd); $(whereAdd).html(outputQuest1); }

 <button id="btn" onclick="createQuest()">Legg til spørsmål</button>

Answer 1

You are overriding the current content by using html() . Use append() to add a new one like this:

$("#list-create-doc").append(outputQuestion);

Here is the docs for jQuery.append and jQuery.html !