There is a block with a question and answer. Clicking on “Add question” and then in the new question “Add answer” adds a new answer only to the first question. How to make a new answer added to the question in which the button "Add answer" was clicked?

Display:

enter image description here

var wrapper = document.getElementsByClassName("wrapper")[0]; var answerWrapper = document.getElementsByClassName("answer-wrapper")[0]; var wrapperTemplate = `<section class="quiz"><div class="question"><h2>Question</h2><input type="text"></div><div class="answer-wrapper"><h2>Answer</h2><div class="answer-item"><input type="text"><input type="checkbox"></div><div class="answer-item"><input type="text"><input type="checkbox"></div></div><button onclick="addA(this)">Add Answer</button></section>`; var answerTemplate = `<div class="answer-item"><input type="text"><input type="checkbox"></div>`; function addQ() { wrapper.insertAdjacentHTML("beforeend", wrapperTemplate); } function addA(elem) { answerWrapper.insertAdjacentHTML("beforeend", answerTemplate); } 
 * { margin: 0; padding: 0; } h2 { color: gray; font-family: monospace; } main { display: flex; justify-content: center; margin: 1rem; } .quiz { padding: 0.5rem; border-bottom: 1px solid gray; } aside { margin: 1rem; } input[type="text"] { margin: 0.2rem 0; outline: none; } input[type="checkbox"] { margin: 0.3rem 0.2rem; } 
 <main> <div class="wrapper"> <div class="quiz"> <div class="question"> <h2>Question</h2> <input type="text"> </div> <div class="answer-wrapper"> <h2>Answer</h2> <div class="answer-item"> <input type="text"><input type="checkbox"> </div> <div class="answer-item"> <input type="text"><input type="checkbox"> </div> </div> <button onclick="addA(this)">Add Answer</button> </div> </div> <aside> <button onclick="addQ()">Add Question</button> </aside> </main>

  • one
    You addA template in answerWrapper to answerWrapper , which refers to the first question. - user207618

1 answer 1

 var wrapper = document.getElementsByClassName("wrapper")[0]; var answerWrapper = document.getElementsByClassName("answer-wrapper")[0]; var wrapperTemplate = `<section class="quiz"><div class="question"><h2>Question</h2><input type="text"></div><div class="answer-wrapper"><h2>Answer</h2><div class="answer-item"><input type="text"><input type="checkbox"></div><div class="answer-item"><input type="text"><input type="checkbox"></div></div><button onclick="addA(this)">Add Answer</button></section>`; var answerTemplate = `<div class="answer-item"><input type="text"><input type="checkbox"></div>`; function addQ() { wrapper.insertAdjacentHTML("beforeend", wrapperTemplate); } function addA(elem) { elem.parentNode.querySelector('.answer-wrapper').insertAdjacentHTML("beforeend", answerTemplate); } 
 * { margin: 0; padding: 0; } h2 { color: gray; font-family: monospace; } main { display: flex; justify-content: center; margin: 1rem; } .quiz { padding: 0.5rem; border-bottom: 1px solid gray; } aside { margin: 1rem; } input[type="text"] { margin: 0.2rem 0; outline: none; } input[type="checkbox"] { margin: 0.3rem 0.2rem; } 
 <main> <div class="wrapper"> <div class="quiz"> <div class="question"> <h2>Question</h2> <input type="text"> </div> <div class="answer-wrapper"> <h2>Answer</h2> <div class="answer-item"> <input type="text"><input type="checkbox"> </div> <div class="answer-item"> <input type="text"><input type="checkbox"> </div> </div> <button onclick="addA(this)">Add Answer</button> </div> </div> <aside> <button onclick="addQ()">Add Question</button> </aside> </main>

  • If that fixed the answer-item on the answer-wrapper . It was necessary to add. Thanks for the help, what would I do without you)) - Arthur
  • one
    Without broblom! :) - user207618
  • @Arthur; Don't forget to accept the answer, if decided. - user207618
  • Take 2: Without a battle