Buggy javascript button event handler
<p>I am trying to implement a music player on my page. I have a table with each row representing a song with the first element being a button whose id is the url of the song.</p>

<pre><code>        &lt;tbody&gt;
        {% for e in entries %}
            &lt;tr&gt;
                &lt;td&gt;&lt;button class="song btn" id="{{ e.url }}"&gt;&lt;i class="icon-play-circle"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;{{ e.title }}&lt;/td&gt;
                &lt;td&gt;{{ e.artist }}&lt;/td&gt; 
                &lt;td&gt;{{ e.features }}&lt;/td&gt;
                &lt;td&gt;{{ e.genre }}&lt;/td&gt;
                &lt;td&gt;&lt;a href="/myapp/editsong/{{ e.id }}"&gt;Edit&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
        {% endfor %}
        &lt;/tbody&gt;
</code></pre>

<p>I am trying to implement some javascript to change the src of a HTML5 audio element on the page when a button is clicked to its id:</p>

<pre><code>$("button.song").on("click", function(event){
    if (audio.src != event.target.id)
    {
      audio.src = event.target.id;
      play.className = 'btn btn-success';
      pause.className = 'btn';
      audio.play();
  }
});
</code></pre>

<p>This implementation works somewhat, but is very buggy. Sometimes clicking a button will change the audio element src to blank and I will have to click the button multiple times.</p>
