onClick triggers all elements. I want to only trigger the specified element

Question

I have searched StackOverflow and online forums but haven't gotten an answer for this issue, although I believe this is a basic question, but I'm lost.

Let's presume I have a row with two columns, each column has an audio player.

I have customized the style of the audio player through JavaScript by adding and removing classes. And programmed its functionalities also through JavaScript.

everything is working and functional, but When I add a second audio player, then they both trigger the JavaScript code and start playing. Same goes if I add a third or fourth.

My question is: how do I make the audio players play independently from each other?

I have came across this in other places with JavaScript too, I seem to always have a problem of executing my block of code only for the element that called it and not every element on the page that shares the same attributes.

function playAudio(val) {
  var aud = $("audio")[val - 1];

  $(".play-pause").on("click", function () {
    if (aud.paused) {
      aud.play();
      aud.loop = false;
      $(".play-pause").removeClass("icon-play");
      $(".play-pause").addClass("icon-stop");
    } else {
      aud.pause();
      $(".play-pause").removeClass("icon-stop");
      $(".play-pause").addClass("icon-play");
    }
  });

  $(".next").on("click", function () {
    //Replace the below source with the next audio file source
    aud.src = "another audio source";
  });

  aud.ontimeupdate = function () {
    $(".progress").css("width", (aud.currentTime / aud.duration) * 100 + "%");

    var mins = Math.floor(aud.currentTime / 60);
    if (mins < 10) {
      mins = "0" + String(mins);
    }
    var secs = Math.floor(aud.currentTime % 60);
    if (secs < 10) {
      secs = "0" + String(secs);
    }

    $("#timestamp").text(mins + ":" + secs);
  };
}

.player {
  position: relative;
  display: flex;
  border-radius: 0px;
  padding: 5 16px;
}

.player .info {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 50%;
  padding: 0 16px;
}

.player .info .name {
  font-size: 15px;
  font-weight: 700;
}

.player .info .singer {
  font-size: 12px;
}

.player .audioBtns {
  width: 50%;
  /*align-items: center;*/
  padding: 0 16px;
}

.player .audioBtns div:nth-child(1) {
  font-size: 30px;
}

.player .audioBtns div:nth-child(2),
.player .audioBtns div:nth-child(3) {
  font-size: 18px;
}

.player .progress {
  position: absolute;
  height: 5px;
  left: 0;
  bottom: 0;
  background-color: #f8f9fa;
  border-radius: 0px;
}

.icon-loop {
  content: url("loop.svg");
  width: 20px;
  height: 20px;
  display: block;
}

.icon-play:before {
  content: url("https://image.flaticon.com/icons/svg/860/860768.svg");
  width: 30px;
  height: 45px;
  display: block;
}

.icon-stop:before {
  content: url("https://image.flaticon.com/icons/svg/633/633940.svg");
  width: 30px !important;
  height: 40px !important;
  display: block;
}

.playBtn {
  padding: 0 16px;
}

.activeOverlay {
  filter: invert(42%) sepia(11%) saturate(1216%) hue-rotate(279deg)
    brightness(88%) contrast(85%);
}

.audioContainer {
  background-color: #d3d3d3;
  padding: 2% 2% !important;
}

.audioContainer:not(:last-child) {
  margin-bottom: 3%;
}

.audioContainerActive {
  background-color: #855b6f !important;
  color: #f8f9fa !important;
}

.IconActive {
  filter: invert(92%) sepia(17%) saturate(3434%) hue-rotate(186deg)
    brightness(127%) contrast(95%);
}





  
    
      

      
        
          By The Shell
        
        
          Adam M.
        
      
      
        00:00
      
      
    
  

  

  
    
      

      
        
          Turntable
        
        
          Adam M.
        
      
      
        00:00

user_3080603 · Answer

You are using a class selector, and it matches all elements of class play-pause. If you want to target a specific element, then assign them different ids or classes.

More info: https://css-tricks.com/the-difference-between-id-and-class/

onClick triggers all elements. I want to only trigger the specified element

1 Answers