Javascript 如何在我的博客中添加两个或更多扰流板按钮

问题：我的Blogspot博客中有一个很好的扰流板代码。但是，当我在我的博客中两次放置相同的代码（如扰流板1和扰流板2）时，扰流板1工作正常，但扰流板2无法打开。为什么？我怎么修理它？请帮忙。我不懂编程

以下是我正在使用的扰流板代码：

enter <div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE
</div> 
<a display="initial" 
   id="button" 
   title="Click to show/hide content" 
   type="button" 
   onclick="if(document.getElementById('spoiler')                     
                       .style.display=='none') {
               document.getElementById('spoiler')                                    
                       .style.display=''
            }else{
               document.getElementById('spoiler')               
                       .style.display='none'
            }">
   Show hidden content
</a>

enter
此处隐藏内容
显示隐藏内容

在我重命名ID时适用

enter <div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE
</div> 
<a display="initial" 
   id="button" 
   title="Click to show/hide content" 
   type="button" 
   onclick="if(document.getElementById('spoiler')                     
                       .style.display=='none') {
               document.getElementById('spoiler')                                    
                       .style.display=''
            }else{
               document.getElementById('spoiler')               
                       .style.display='none'
            }">
   Show hidden content
</a>


enter <div id="spoiler2" style="display:none"> 
HIDDEN CONTENT HERE
</div> 
<a display="initial" 
   id="button" 
   title="Click to show/hide content" 
   type="button" 
   onclick="if(document.getElementById('spoiler2')                     
                       .style.display=='none') {
               document.getElementById('spoiler2')                                    
                       .style.display=''
            }else{
               document.getElementById('spoiler2')               
                       .style.display='none'
            }">
   Show hidden content
</a>

enter
此处隐藏内容
显示隐藏内容
进入
此处隐藏内容
显示隐藏内容

任何人请帮帮我。非常感谢。。。先生，我很想知道答案。