title: How to use javascript function for more than one tag with similar id?
body: <p>I am using javascript to change the color of the text of a tag by mouseover function on other tag written in html.
  ex:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function mouseoverbox1() {
    var mypara = document.getElementById("a1");
    mypara.style.color = "green";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div onmouseover="mouseoverbox1()"&gt;
    &lt;a id="a1"&gt;Color&lt;/a&gt;
    &lt;a id="a1"&gt;Names&lt;/a&gt;
    &lt;a id="a1"&gt;Places&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now as I run the code only the color of tag "Color" changes to green  and not of Names and Places. Is there any way that my function could accept the changes to all anchor tags with similar id???</p>