HTML table columns only playing sound of first audio for all
<p>I created a table with 2 columns per row whose columns on mouseover will play a corresponding sound. The issue is it's only playing the first sound test1.ogg for all columns?</p>

<pre><code>window.onload = function() {
   var mySound = document.getElementById('mySound');
   var myIcons = document.getElementsByClassName('myIcon');

   for(var i = 0; i &lt; myIcons.length; i++) {
      myIcons[i].onmouseover = function() {
        mySound.play();
        return false;
      };
   };
}; 

&lt;tr&gt;
   &lt;td class="myIcon"&gt;Test1
      &lt;audio id='mySound'  preload="auto"&gt;&lt;source src='test1.ogg'/&gt;
      &lt;/audio&gt;
   &lt;/td&gt;
   &lt;td class="myIcon"&gt;Test2
      &lt;audio id='mySound'  preload="auto"&gt;&lt;source src='test2.ogg'/&gt;
      &lt;/audio&gt;
   &lt;/td&gt;
&lt;/tr&gt;
</code></pre>