Здравствуйте!
Пожалуйста, помогите с созданием <ul id="playlist#2"> по аналогии с <ul id="playlist#1">: при нажатии на "#1" поочерёдно выделяются жирным строки "playlist#1" с воспроизведением аудио. Не могу добиться такого же эффекта с "playlist#2" при нажатии на "#3":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.selected {
font-weight: bold
}
</style>
</head>
<body>
<audio id="player"></audio>
<ul id="playlist#1"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3">#1</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3">#2</li></ul>
<ul id="playlist#2"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3">#3</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3">#4</li></ul>
<script type="text/javascript">
// globals
var _player = document.getElementById("player"),
_playlist = document.getElementById("playlist#1");
// functions
function playlistItemClick(clickedElement) {
var selected = _playlist.querySelector(".selected");
if (selected) {
selected.classList.remove("selected");
}
clickedElement.classList.add("selected");
_player.src = clickedElement.getAttribute("data-ogg");
_player.play();
}
function playNext() {
var selected = _playlist.querySelector("li.selected");
if (selected && selected.nextSibling) {
playlistItemClick(selected.nextSibling);
}
}
// event listeners
_player.addEventListener("ended", playNext);
_playlist.addEventListener("click", function (e) {
if (e.target && e.target.nodeName === "LI") {
playlistItemClick(e.target);
}
});
</script>
</body>
</html>
P.S. Понимаю, что надо по аналогии продублировать
javascript для "playlist#2", но самостоятельно справится не получается... Please, help me!!!