javascriptの表示/非表示の切り替えボタンは小規模では機能しますが、私の大きなHTMLコードでは機能しません

Question

ここに私のコンテンツの表示/非表示の概念があります。それも動作します。 https://jsfiddle.net/mplungjan/a7Lfjsgh/

これは上記の小さなhtmlコードで動作します。しかし、それを私のより大きなHTMLコードに適用するとうまくいきません。なぜ誰かが知っていますか？

私の目標は、回答を表示ボタンにスパンが付いた多数のリスト項目を持つことです。

HTML：

<nav class="Rightbox" id="RightFrench">  
<div id="Stage1"> 
<h1>Stage 1</h1> 
<h5> <span class="HighlightBlue">Exercise 1 - </span></h5> 
<h5><button class="AnswerTitle" id="AnswersFrenchStage1Ex1">Reveal Answers</button></h5>  

<p class="Task"> 
    <span class="HighlightBlue">Translate the following</span> 
</p> 
<ul> 
<li> 
<p> the passeport <textarea></textarea> 
    <span class="FrenchStage1Ex1">la passeport</span> 
</p> 
</li> 

<li> 
<p>the passeport <textarea></textarea> 
    <span class="FrenchStage1Ex1">la passeport</span> 
</p> 
</li> 
</div> 
</nav> 

Javascriptを：

window.onload = function() { 
    var buttons = document.querySelectorAll(".AnswerTitle"); 
    for (var i = 0; i < buttons.length; i++) { 
    buttons[i].onclick = function() { 
     var id = this.id.replace(/reveal/, "FrenchStage"); 
     var answers = document.querySelectorAll("." + id); 
     for (var i = 0; i < answers.length; i++) { 
     answers[i].style.display = answers[i].style.display == "inline" ? "none" : "inline"; 
     } 
    } 
    } 
} 

CSS：

.Rightbox ul li p span {display:none;} 

Answer 1

問題は、私はジャバスクリプトがあったと考えて、ボタンのIDを変更することが判明しますボタンIDを使用しないでください。

var id = this.id.replace(/reveal/, "FrenchStage") 

が本当に含むIDを持つようにボタンを望んでいたが判明し

「明らかに」