Конструкция
По описанию вам нужно генерировать для каждого вопроса отдельный блок, со своим вопросом, ответом и кнопкой который откроет этот ответ. Мне кажется вам надо такая конструкция:
<body>
<template id="question-block">
<div class="question">
<p class="question__text"></p>
<button class="question__btn"></button>
</div>
<p class="answer__text" hidden></p>
</template>
</body>
Решение
function generateQuestionBlock(question, answer) {
const templateQuestionBlock = document.querySelector(`template#question-block`);
const divQuestionCloneFragment = templateQuestionBlock.content.cloneNode(true);
divQuestionCloneFragment.querySelector(`p.question__text`).innerText = question;
const divAnswerText = divQuestionCloneFragment.querySelector(`p.answer__text`);
divQuestionCloneFragment.querySelector(`button.question__btn`).addEventListener(`click`, (event) => {
divAnswerText.hidden = false;
});
divAnswerText.innerText = answer;
document.body.appendChild(divQuestionCloneFragment);
}
generateQuestionBlock(`Как вам мой ответ?`, `Ясно`);
generateQuestionBlock(`У вас оствлтсь вопросы?`, `Надеюсь что нет`);
<body>
<template id="question-block">
<div class="question">
<p class="question__text"></p>
<button class="question__btn">Показать ответ</button>
</div>
<p class="answer__text" hidden></p>
</template>
</body>
document.querySelector(".answer__text").style.display = "block"
находит первый элемент считая с документа, вот и находит каждый раз один и тот же. Если например этот текст у вас в каждой кнопке используйтеelement.querySelector(".answer__text").style.display = "block"
hidden
. Хотите скрыть элемент -element.hidden = true;
хотите показатьelement.hidden = false;
и не надоstyle
лишний раз трогать