title: How to only add audio class when button is clicked?
body: <p>If you run the code and go to the end of the very first song you will notice that it automatically goes to the next song. I only want it to go to the next song if the add to playlist button is clicked, if it is not clicked I want it to skip right over it. I am really struggling and would appreciate all the help I can get.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".toggle_container").hide();
    $("button.reveal").click(function() {
      $(this).toggleClass("active").next().slideToggle("fast");
  
      if ($.trim($(this).text()) === 'Add to Playlist') {
        $(this).text('Remove from playlist');
      } else {
        $("#audioPlayer")[0].pause();
        $("#audioPlayer")[0].currentTime = 0;
        $(this).text('Add to Playlist');
      }
  
      return false;
    });
    $("a[href='" + window.location.hash + "']").parent(".reveal").click();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#searchbar {
    padding: 15px;
    border-radius: 10px;
    width: 80%
  }
  
  #playlist .current-song a {
    color: #7777FE;
    border-color: #008ae6;
  }
  
  #playlist {
    list-style: none;
  }
  
  #playlist li a {
    text-decoration: none;
    color: #ca0ce0;
  }
  
  
  #playlist {
    font-size: 14.5px;
    list-style: none;
    margin-left: 40px;
    color: blue;
  }
  
  .animals {
    display: list-item;
    margin-bottom: 5px;
  
  }
  
  #background {
    border: solid;
    width: 100%;
    height: 75px;
    margin-top: 5px;
    margin-left: 5px;
  }
  
  #background2 {
    border: solid;
    width: 98%;
    height: 75px;
    margin-top: 5px;
    margin-left: 5px;
  }
  
  #background3 {
    border: solid;
    width: 100%;
    height: 75px;
    margin-top: 5px;
    margin-left: 0px;
  }
  
  
  #playlist.current-song {
    border-color: #008ae6;
  }
  
  .image {
    width: 100px;
    float: left
  }
  
  #song {
    margin-left: 13px;
    margin-top: 9px;
    float: left;
  }
  
  .artist {
    text-align: center;
    margin-right: 20px;
    font-size: 12px;
    margin-top: 14px;
  }
  
  .image3 {
    width: 100px;
    float: left;
    height: 75px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;audio id="audioPlayer" preload="true" controls="true"&gt;
      &lt;/audio&gt;
      &lt;ul id="playlist"&gt;
      &lt;li class="animals"&gt;&lt;a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3"&gt;&lt;div id="background3"&gt;&lt;img src="https://images.unsplash.com/photo-1575489560633-6a7609328e67?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="image3"/&gt;&lt;h4 id="song"&gt;Freedom Reign&lt;/h4&gt;&lt;h5 class="artist"&gt;Abt Goat&lt;/h5&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  
        &lt;button class="reveal"&gt;Add to Playlist &lt;/button&gt;
        &lt;div class="toggle_container"&gt;
          &lt;div class="block"&gt;
            &lt;li class="current-song"&gt;&lt;a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3"&gt;
                &lt;div id="background2"&gt;&lt;img src="https://images.unsplash.com/photo-1577044685231-70e99274404c?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1567&amp;q=80Cat" class="image" /&gt;
                  &lt;h4 id="song"&gt;Tummy Why&lt;/h4&gt;
                  &lt;h5 class="artist"&gt;Revy Conover&lt;/h5&gt;
                &lt;/div&gt;
              &lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ul&gt;
      &lt;script&gt;
        audioPlayer();
  
        function audioPlayer() {
          var currentSong = 0;
          $("#playlist li a").click(function(e) {
            e.preventDefault();
            $("#audioPlayer")[0].src = this;
            $("#audioPlayer")[0].play();
            $("#playlist li").removeClass("current-song");
            currentSong = $(this).parent().index();
            $(this).parent().addClass("current-song");
          });
          $("#audioPlayer")[0].addEventListener("ended", function() {
            currentSong++;
            if (currentSong == $("#playlist li a").length)
              currentSong = 0;
            $("#playlist li").removeClass("current-song");
            $("#playlist li:eq(" + currentSong + ")").addClass("current-song");
            $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
            $("#audioPlayer")[0].play();
          });
        }
  
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>