JavaScriptでアンケート機能を実装したい

実現したいこと

【やりたいこと】
・計4問のアンケートが順番に表示され、yesまたはnoをクリックすると次の質問が表示される。
・第4問目の回答が終わったら、yesと回答した問題のみ答えが表示される。
・答えはid="outer01"　～　id="outer04"まで用意しており、それぞれにdisplay: none;を付与しており、yesが選択されるとdisplay: blockに上書きするようにしている。

発生している問題・分からないこと

現在のコードでは回答とそれぞれのidが紐づいておらず、回答内容にかかわらずyesを押すとid="outer01"から順番にdisplay: blockが上書きされてしまう。

例：問1,3はno、問2, 4はyesと回答しても4問目の回答が終わったらid="outer01"とid="outer02"にdisplay: blockが付与されてしまう。

該当のソースコード

JavaScript

1<style>2 3 #question-container {4 margin-bottom: 20px;5 }6 7 #result-container {8 display: none;9 margin-top: 20px;10 }11 12 .p-q_outer {13 display: none;14 width: 100%; 15 margin: 10px 0;16 }17 18 main {19 width: min(750px, 100%);20 margin: auto;21 }22 main h2,23 main button {24 font-size: 20px;25 }26 27 28</style>29<div id="question-container">30 <h2 id="question">質問1: これは質問1です。</h2>31 <button onclick="answerQuestion(true)">Yes</button>32 <button onclick="answerQuestion(false)">No</button>33</div>34 35<div id="result-container">36 <h2>結果</h2>37 <p id="result-text"></p>38</div>39<div class="p-q_outer" id="outer01">40 <div class="p-q_inner">41 <h2 class="p-q_title">質問1に対する回答</h2>42 <p class="p-q_text">テキスト1</p>43 </div>44</div>45<div class="p-q_outer" id="outer02">46 <div class="p-q_inner">47 <h2 class="p-q_title">質問2に対する回答</h2>48 <p class="p-q_text">テキスト2</p>49 </div>50</div>51<div class="p-q_outer" id="outer03">52 <div class="p-q_inner">53 <h2 class="p-q_title">質問3に対する回答</h2>54 <p class="p-q_text">3</p>55 </div>56</div>57<div class="p-q_outer" id="outer04">58 <div class="p-q_inner">59 <h2 class="p-q_title">質問4に対する回答</h2>60 <p class="p-q_text">テキスト4</p>61 </div>62</div>63<script>64 let currentQuestion = 1;65 let answers = [];66 67 function answerQuestion(isYes) {68 answers.push(isYes);69 70 if (currentQuestion < 4) {71 currentQuestion++;72 document.getElementById('question').innerText = '質問' + currentQuestion + ': ' + getQuestionText(currentQuestion);73 } else {74 showResults();75 }76 }77 78 function showResults() {79 let resultContainer = document.getElementById('result-container');80 let resultText = document.getElementById('result-text');81 let yesAnswers = answers.filter(answer => answer);82 83 84 85 document.getElementById('question-container').style.display = 'none';86 resultContainer.style.display = 'block';87 88 // trueの場合に対応するHTMLを表示89 for (let i = 0; i < yesAnswers.length; i++) {90 let div = document.getElementById('outer' + (i + 1).toString().padStart(2, '0'));91 div.style.display = 'block';92 }93 }94 95 function getQuestionText(questionNumber) {96 switch(questionNumber) {97 case 1:98 return 'これは質問1です。';99 case 2:100 return '質問2に答えられますか？';101 case 3:102 return '3は難問です。';103 case 4:104 return '最後の質問';105 default:106 return '';107 }108 }109</script>110

試したこと・調べたこと

上記の詳細・結果

アンケート機能の実装までは自己実現できたが、質問内容の実装方法が見つからない。

補足

特になし