How to have multiple instances of one jQuery player object in a page (Audio object)
<p>I have made a customised audio player, but the problem is that I can only have one player in each HTML page. Because so since the js code is associated to for example class <code>.play</code>then if there are 2 <code>.play</code> classes on the page, both work.  While the only one that is pressed is supposed to work. Here is a very simplified version of the player. I know this example can be solved by using <code>this</code> in some part of the code, but imagine it is a full plugin with lots of functionalities.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
  var audio, src;
  src = $(".player").attr("data-src");
  audio = new Audio();
  audio.src = src;

  $(".play").on("click", function() {
    if (audio.paused) {
      audio.play();
      $(".play").css("background", "url(https://goo.gl/w4q23U) no-repeat");
    } else {
      audio.pause();
      $(".play").css("background", "url(https://goo.gl/xOkUZm) no-repeat");
    }
  });

})(jQuery);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.player{
  width:200px;
  height:50px;
  border:dashed 1px black;
  margin:5px;
}
div.player &gt; .play {
  width: 48px;
  height: 48px;
  background: url(https://goo.gl/xOkUZm) no-repeat;
  float:left;
}
div.player &gt; .title{
  line-height:50px;
  margin-left:60px;
} </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="player" data-src="https://goo.gl/aBJE48"&gt;
  &lt;div class="play"&gt;&lt;/div&gt;
  &lt;div class="title"&gt;track 1&lt;/div&gt;
&lt;/div&gt;

&lt;div class="player" data-src="https://goo.gl/4arvDT"&gt;
  &lt;div class="play"&gt;&lt;/div&gt;
  &lt;div class="title"&gt;track 2&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>As you can see, if you press button to play, both icons works, while only the one that is pressed is supposed to work. I am looking for a proper solution for having various instances of the same plugin in a single page.</p>

<p>There are similar question with this title, but the point of this question is considering the audio object which the page can only play one of them, no matter if there is one instance of the player of multiple. </p>