JavaScriptでアンケート機能の質問をループ表示できるようにしたい

実現したいこと

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

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

現在のコードではQ1~Q2のうち1つでもyesと回答すると意図した挙動が実現できるが、全てnoと回答し、2周目以降にyesと回答すると該当箇所のid="outer◯◯"にdisplay: blockが付与されない。

考えられる原因としては1周目にnoと回答した時点でanswerQuestion(isYes)の条件分岐が働いてしまっていることが原因だと思うのですが、解決方法が分からず助けていただけないでしょうか。

該当のソースコード

HTML

1<div id="question-container" class="p-q"> 2 <h2 id="question"><img src="[tempurl]/img/question/q01.png" alt="" class="w100"></h2> 3 <div class="p-q_btn"> 4 <button onclick="answerQuestion(true)" class="p-q_btn-icon"><img src="[tempurl]/img/question/q_btn-yes.png" alt="" class=""></button> 5 <button onclick="answerQuestion(false)" class="p-q_btn-icon"><img src="[tempurl]/img/question/q_btn-no.png" alt="" class=""></button> 6 </div> 7</div> 8 9<div id="result-container"> 10 <p class=""><img src="[tempurl]/img/question/q-head.jpg" alt="" class="w100"></p> 11 <p id="result-text"></p> 12</div> 13<div class="p-q_outer" id="outer01"> 14 <div class="p-q_inner"> 15 <h2 class="p-q_title">質問①</h2> 16 <p class="p-q_img"><img src="[tempurl]/img/question/q01_content-img.jpg" alt="" class="w100"></p> 17 </div> 18</div> 19<div class="p-q_outer" id="outer02"> 20 <div class="p-q_inner"> 21 <h2 class="p-q_title">質問②</h2> 22 <p class="p-q_img"><img src="[tempurl]/img/question/q02_content-img.jpg" alt="" class="w100"></p> 23 </div> 24</div> 25<div class="p-q_outer" id="outer03"> 26 <div class="p-q_inner"> 27 <h2 class="p-q_title">質問③</h2> 28 <p class="p-q_img"><img src="[tempurl]/img/question/q03_content-img.jpg" alt="" class="w100"></p> 29 </div> 30</div> 31<div class="p-q_outer" id="outer04"> 32 <div class="p-q_inner"> 33 <h2 class="p-q_title">質問④</h2> 34 <p class="p-q_img"><img src="[tempurl]/img/question/q04_content-img.jpg" alt="" class="w100"></p> 35 </div> 36</div>

CSS

1<style>2 3 #question-container {4 margin-bottom: 20px;5 transition: opacity 0.5s ease-in-out;6 }7 8 #result-container {9 display: none;10 margin-top: 20px;11 transition: opacity 0.5s ease-in-out;12 }13 14 .p-q_outer {15 display: none;16 width: 100%;17 margin: 10px 0;18 opacity: 0;19 transition: opacity 0.5s ease-in-out;20 }21 .p-q_btn-icon{22 background: #fff;23 }24 25 main {26 width: min(750px, 100%);27 margin: auto;28 }29 30 main h2,31 main button {32 font-size: 20px;33 }34 35</style>

JavaScript(JQuery)

1<script>2 let currentQuestion = 1;3 let answers = [];4 5 function answerQuestion(isYes) {6 answers.push(isYes);7 8 if (currentQuestion < 4) {9 fadeOut('question-container');10 setTimeout(() => {11 currentQuestion++;12 13 // 質問文を画像に切り替える14 document.getElementById('question').innerHTML = '<img src="https://test.com/menu/wp-content/themes/child/img/question/q0' + currentQuestion + '.png" alt="" class="w100">';15 16 fadeIn('question-container');17 }, 500); // フェードアウト完了後にフェードイン開始18 } else {19 if (answers.every(answer => !answer) && currentQuestion === 4) {20 // 全て"answerQuestion(false)"が選択され、かつq04.pngが表示されている場合21 // q01.pngを再表示する22 fadeOut('question-container');23 setTimeout(() => {24 currentQuestion = 1;25 document.getElementById('question').innerHTML = '<img src="https://test.com/menu/wp-content/themes/child/img/question/q01.png" alt="" class="w100">';26 fadeIn('question-container');27 }, 500);28 } else {29 fadeOut('question-container');30 setTimeout(() => {31 showResults();32 fadeIn('result-container');33 }, 500); // フェードアウト完了後にフェードイン開始34 }35 }36 }37 38 39 function showResults() {40 let resultContainer = document.getElementById('result-container');41 let resultText = document.getElementById('result-text');42 43 document.getElementById('question-container').style.display = 'none';44 resultContainer.style.display = 'block';45 46 // trueの場合に対応するHTMLを表示47 for (let i = 0; i < answers.length; i++) {48 if (answers[i]) {49 let div = document.getElementById('outer' + (i + 1).toString().padStart(2, '0'));50 fadeInElement(div);51 }52 }53 }54 55 function fadeIn(elementId) {56 let element = document.getElementById(elementId);57 element.style.opacity = '1';58 }59 60 function fadeOut(elementId) {61 let element = document.getElementById(elementId);62 element.style.opacity = '0';63 }64 65 function fadeInElement(element) {66 element.style.opacity = '0';67 element.style.display = 'block';68 69 setTimeout(() => {70 element.style.opacity = '1';71 }, 100);72 }73 74</script>

試したこと・調べたこと

上記の詳細・結果

currentQuestion と answers が、最初に回答された後も増加し続けていることが原因ではないかと考え、answerQuestion 関数内で currentQuestion の増加を制御する処理を加えたが結果は変わりませんでした。

補足

特になし