Prevent jQuery from selecting multiple items with the same class

Question

I have a post feed where a play button can be clicked and the play button will be toggled to a pause button, however, when I click on one of the play buttons, both pause buttons are toggled on (for each post). How do I only allow Javascript to toggle the single play button on the feed when there are multiple classes with the same name on the page.

What it looks like after I click the top play button (both pause buttons are toggled when only the top one should change):

Here is the HTML:

<div class="media-circle">
<!-- the pause icon is display: none at start -->
   <i class="icon ion-ios-play"></i><i class="icon ion-pause feed-pause"></i>
</div>

Here is the Javascript:

jQuery('.media-circle').click(function (e) {
    e.preventDefault();
    jQuery(this).find('i').toggleClass('ion-ios-play');
    jQuery('.feed-pause').toggle();
    //this controls universal bottom bar play button
    jQuery('#bottom-play-button-container').find('i').toggleClass('ion-ios-play').toggleClass('ion-pause'); 
});

Here is the JS for the bottom play button (fairly similar) EDIT*

jQuery('#bottom-play-button-container').click(function (e) {
    e.preventDefault();
    jQuery(this).find('i').toggleClass('ion-ios-play').toggleClass('ion-pause');
    jQuery('#play-pause-toggle').find('i').toggleClass('ion-ios-play').toggleClass('ion-pause');

    jQuery('.media-circle').find('i').toggleClass('ion-ios-play');
    jQuery('.feed-pause').toggle();

});

Answer 1

var $album = $('.album-dark-overlay'),
  $bottombutton = $('#bottom-play-button-container'),
  $last_player = null; // This will be the last player playing, we need it to continue the playing after the general player changes manually from play to pause

$album.click(function(e) {

  e.preventDefault();

  // Toggle any play class to pause from other elements playing.
  $album.filter('.pause').not(this).toggleClass('play pause');

  //Toggle general button in the same way.
  if ($(this).hasClass('pause')) {

    $bottombutton.removeClass('pause').addClass('play');

  } else {

    $bottombutton.removeClass('play').addClass('pause');

  }

  // Toggle the class from pause to play and from play to pause
  $(this).toggleClass('play pause');

  // Update variable to this player
  $last_player = $(this);

});

$bottombutton.click(function(e) {

  e.preventDefault();

  // Check if the #bottombutton has class .pause and pause all playing players
  if ($bottombutton.hasClass('pause')) {

    // Toggle the class from pause to play and from play to pause
    $album.filter('.pause').toggleClass('play pause');

    // Check if the $last_player was assigned at least once.
  } else if ($last_player !== null) {

    $last_player.toggleClass('play pause');

  }

  $bottombutton.toggleClass('play pause');

});

.album-dark-overlay,
#bottom-play-button-container {
  padding: 10px;
  cursor: pointer;
  float: left;
}

#bottom-play-button-container {
  background-color: pink;
}

.play .ion-pause {
  display: none;
}

.pause .ion-ios-play {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="album-dark-overlay play">
  <div class="media-circle">
    <i class="icon ion-ios-play"></i><i class="icon ion-pause feed-pause"></i>
  </div>
</div>
<div class="album-dark-overlay play">
  <div class="media-circle">
    <i class="icon ion-ios-play"></i><i class="icon ion-pause feed-pause"></i>
  </div>
</div>

<div id="bottom-play-button-container" class="play">
  <!--<a id="media-toggle-bottom" href="">-->
  <i class="icon ion-ios-play"></i><i class="icon ion-pause"></i>
  <!--</a>-->
</div>

---

This JSFiddle is a general code but it might help you understand better how, in my opinion, you could approach it and it should be easy to adapt.

There are some UX aspects that I'm assuming:

• If a singular player is playing, when the user clicks play button of a second player the first player pauses.
• If a player starts playing the #general_button changes to pause also. When the user clicks the general (pause now) button the individual player pauses. Clicking again the general (play now) button starts playing the previous singular player.