title: Can I assign multiple data-id values to one attribute in one element?
body: <p>I use WordPress. I have an audio player on my site. When a user clicks the play button on an individual song, it will play the song. The post ID is how the player determines which song to play. </p>
  
  <p>So in the DIV that wraps the button tag, I assign an attribute: <code>data-id</code> which is the post id of the song. My app then grabs the MP3 file that is associated with that post ID. Simple.</p>
  
  <p>My play button tag is essentially this:  </p>
  
  <pre><code>&lt;div class="item item-action" data-id="1161"&gt;
    &lt;button class="btn-playpause"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The important parts of my player.js file that handles the click event and plays the song is below:</p>
  
  <p><strong>Simulate the play button</strong></p>
  
  <pre><code>// simulate the play btn
    $(document).on('click.btn', '.btn-playpause, .btn-queque', function(e){
        e.stopPropagation();
        var self = $(this),
            item = $(this).closest('.item'),
            id = item.attr('data-id'),
            type = item.data('user-id') ? 'user' : 'post',
            play = true;
  
        if(!player){
          getItem(id, type).done(function(obj){
            if(obj.status == 'success'){
              mep.mepPlaylistTracks = obj.tracks;
              initPlayer();
              player &amp;&amp; player.mepSelect(0, true);
            }
          });
          return;
        }
  
        if(self.is('.btn-queque')){
          play = false;
          self.parent().dropdown('toggle');
        }
        if( self.hasClass('is-playing') ){
          self.removeClass('is-playing');
          player.pause();
        }else{
          var index = player.find(id);
          if( index !== -1){
            var track = player.mepGetCurrentTrack();
            if(track &amp;&amp; track.id == id &amp;&amp; !play) return;
            player.mepSelect(index, true);
          }else{
            getItem(id, type).done(function(obj){
              if(obj.status == 'success'){
                addToPlay(obj.tracks, play);
              }
            });
          }
        }
    });
  </code></pre>
  
  <p><strong>getItem() function</strong></p>
  
  <pre><code>function getItem(id, type){
      return $.ajax({
         type : "post",
         dataType : "json",
         url : ajax.ajax_url,
         data : {action: "ajax_music", id : id, type: type, nonce: ajax.nonce}
      });
    }
  </code></pre>
  
  <p><strong>addToPlay() function</strong></p>
  
  <pre><code>function addToPlay(obj, play){
      if(obj.length == 1){
        player.mepAdd( obj[0], play );
      }else if(obj.length &gt; 1){
        if(play){
          player.options.mepPlaylistTracks = obj;
          player.updatemepList();
          player.mepSelect(0, true);
        }else{
          for(var i=0; i&lt;obj.length; i++){
            player.mepAdd( obj[i] );
          }
        }
      }
    }
  </code></pre>
  
  <p>You can see that once I click the play button, depending on a condition, it fires the <code>getItem()</code> function. getItem() takes the data-id attribute defined earlier as the <code>id</code> variable and begins to play the song.</p>
  
  <p>The <code>addToPlay()</code> function will add another song to the playlist if there is already an instance of the player open. And when a user clicks another play button, it will add that new song to the list and begin to play that song.</p>
  
  <h2>Is it possible to modify this code so that I can add multiple data-id values to my button code so that my script will recognize there is more than one song id and add those to my playlist, using the <code>addToPlay()</code> function?</h2>
  
  <p>I'd like to do something like this</p>
  
  <pre><code>&lt;div class="item item-action" data-id="1161, 1288, 1456"&gt;
    &lt;button class="btn-playpause"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>The reason I want to do this, is I would like to add a feature that will allow my users to Play All Songs on the current page they're viewing. Some of our pages, like the catalog page, displays dozens of songs that fit a certain criteria and I'd like the option to play all songs on the page.</p>
  
  <p>Can anyone help push me in the right direction?</p>
  
  <p>Thanks.</p>