My next and stop button not working, Song selections stay pink even after hitting next and stop.

// sets properties for the songs 
function Song(title, artist, duration) {
  this.title = title;
  this.artist = artist;
  this.duration = duration;
  // this is to monitor whether the song is on or off 
  this.isPlaying = false;
}

Song.prototype.play = function() {
  // this will start playing the song 
  this.isPlaying = true;
};

Song.prototype.stop = function() {
  // this will make the song stop playing
  this.isPLaying = false;
};

Song.prototype.toHTML = function() {
  //create the HTML that will be displayed 
  var htmlString = '<li';
  if(this.isPlaying){
    htmlString +=  ' class="current"'
  }
  htmlString += '>';
  htmlString += this.title;
  htmlString += ' - ';
  htmlString += this.artist;
  htmlString += '<span class="duration">';
  htmlString += this.duration;
  htmlString += '</span></li>'

  return htmlString;
};

function Playlist() {
  // create an empty array of songs 
  this.songs = [];
  this.nowPlayingIndex = 0;

}

//  push songs into empty songs array []
Playlist.prototype.add = function(song) {
  this.songs.push(song);
};

Playlist.prototype.play = function() {
  // access current song by using nowPlayingIndex 
  var currentSong = this.songs[this.nowPlayingIndex];
  currentSong.play();
};

Playlist.prototype.stop = function(){
  // access current song by using nowPlayingIndex 
  var currentSong = this.songs[this.nowPlayingIndex];
  currentSong.stop();
};

Playlist.prototype.next = function(){
  // stops current song that is playing
  this.stop();
  // increment the index to move the playlist to the next song
  this.nowPlayingIndex++;
  // ensure that nowPlayingIndex count doesnt go over the the amount of songs availble
  if(this.nowPlayingIndex === this.songs.length){
    this.nowPlayingIndex = 0;
  }
  this.play();
};

Playlist.prototype.renderInElement = function(list) {
  list.innerHTML = "";
  for(var i = 0; i < this.songs.length; i++){
    // .innerHTML allows us to insert it into the HTML
    list.innerHTML += this.songs[i].toHTML();
  }
};

var playlist = new Playlist();

var allTheWay = new Song("All the way", "Time flies ", "2:54");
var iChooseYou = new Song("I choose you", "Time flies ", "3:43");

playlist.add(allTheWay);
playlist.add(iChooseYou);

// Getting ordered HTML list
var playlistElement = document.getElementById("playlist");

// pass playlistElement into renderInElement
playlist.renderInElement(playlistElement);

// implement a click element on buttons
var playButton = document.getElementById("play");
playButton.onclick = function(){
  playlist.play();
  // since playlist.play() changes the state of the objects, we need to refresh the user interface by passing in the renderInElement 
  playlist.renderInElement(playlistElement);
}

var nextButton = document.getElementById("next");
nextButton.onclick = function(){
  playlist.next();
  playlist.renderInElement(playlistElement);
}
var stopButton = document.getElementById("stop");
stopButton.onclick = function(){
  playlist.stop();
  playlist.renderInElement(playlistElement);
}