title: eventListener firing multiple times and increasing
body: <p>On a click function I have the option of playing audio.</p>
  
  <p>The click is only fired once (after I added <code>.off()</code>, which I seem to have to do for every click event because I think there's something I fundamentally don't get about how javascript works) but the function added to the "ended" listener shows it is firing the number of times the button has been clicked. I presume <code>.play()</code> is also being fired multiple times.</p>
  
  <p>These need to be inside the click event to get the id so how do I stop these kinds of things from happening, here and elsewhere when using js? Adding <code>event.stopPropagation()</code>, <code>event.bubbles = false</code> and <code>.off()</code> everywhere seems unnecessary (and in this case doesn't make a difference anyway).</p>
  
  <pre><code>$('.button').off().on('click', function(event){
      event.stopPropagation();
      event.bubbles = false;
      var id = $(this).attr('id')
      if ($(this).hasClass('hasAudio')) {
          document.getElementById('audio_'+id).play();
          document.getElementById('audio_'+id).addEventListener("ended", function(){
              console.log("ended");
          });
      }
  });
  </code></pre>