title: How to apply CSS style to all elements with same ID using one button?
body: <p>My idea was to create a button to hide/show all hidden text (Hide by highlighting the text in black, show by making the background color of the text transparent). But the codes, as shown below, only works for the 1st element with the given ID ("p2"). </p>
  
  <p>Javascript: </p>
  
  <pre><code>function change()
  {
      var test = document.getElementById("button1");
      if (test.value=="Hide Spoiler") 
      {  
          test.value = "Open Spoiler"; 
          document.getElementById("p2").style.backgroundColor="black";  
      }
      else  
      {  
          test.value = "Hide Spoiler"; 
          document.getElementById("p2").style.color="black";
          document.getElementById("p2").style.backgroundColor="transparent";  
      }
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;input onclick="change()" type="button" value="Open Curtain" id="button1"&gt;&lt;/input&gt;
  &lt;br&gt;
  &lt;span id="p2"&gt;Hidden text&lt;/span&gt; Test for more &lt;span id="p2"&gt;Hidden text&lt;/span&gt; test again. &lt;span id="p2"&gt;Hidden text&lt;/span&gt;
  </code></pre>
  
  <p>How would I make all the elements with similar ID to change its CSS style using only 1 button? Thanks. </p>