Проблема с плеером на JavaScript

Есть самопальный плеер на JavaScript, если я добавляю второй элемент <audio>, то он работает лишь с первым источником, игнорируя другой, то есть переключения не происходит.

Как воспроизводимый audio останавливать и выполнять play на другом? Учитывая что id един.

В итоге, хотелось бы чтобы он легко смог переключаться между треками.

HTML

<div id="wrapper">
<audio id="mytrack" controls>
    <source src="1.mp3" type="audio/mp3">
</audio>
<audio id="mytrack" controls>
    <source src="1.mp3" type="audio/mp3">
</audio>
<nav>
    <div id="defaultbar">
        <div id="progressBar"></div>        
    </div>
    <div id="buttons">
        <button  type="button" id="playButton"</button>
        <button type="button" id="muteButton"></button>
        <span id="currentTime">0:00</span>
        <span id="fullDuration">0:00</span>
    </div>  
</nav>      

JS

var mytrack = document.getElementById('mytrack');
var playButton = document.getElementById('playButton');
var muteButton = document.getElementById('muteButton');
var duration = document.getElementById('fullDuration');
var currentTime = document.getElementById('currentTime');
var barSize = 640;
var bar = document.getElementById("defaultbar");
var progressBar = document.getElementById('progressBar');
mytrack.addEventListener("loadedmetadata", changeDuration);
function changeDuration() {
    var minutes = parseInt(mytrack.duration/60);
    var seconds = pad(parseInt(mytrack.duration%60));
    duration.innerHTML = minutes+":"+seconds;
}
playButton.addEventListener('click', playOrPause, false);
playbut.addEventListener('click', playOrPause, false);
muteButton.addEventListener('click', muteOrUnmute,false);
bar.addEventListener('click', clickedBar, false);
function playOrPause() {
    if(!mytrack.paused && !mytrack.ended) {
            mytrack.pause();
        playButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd8c/UEl9FgLZ8Uk.jpg)';
    window.clearInterval(updateTime);
    }
    else {
        mytrack.play();
        playButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd85/CC4adfFPVDA.jpg)';
        updateTime = setInterval(update , 1);
    }
}
function muteOrUnmute() {
    if(mytrack.muted == true) {
        mytrack.muted = false;
        muteButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd93/VaNlI7pWMkE.jpg)';
    }
    else {
        mytrack.muted = true;
        muteButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd93/VaNlI7pWMkE.jpg)';
    }
}
function update() {
    if(!mytrack.ended) {
        var playedMinutes = parseInt(mytrack.currentTime/60);
        var playedSeconds = pad(parseInt(mytrack.currentTime%60));
        currentTime.innerHTML =playedMinutes + ':' + playedSeconds;
        var size = parseInt(mytrack.currentTime*barSize/mytrack.duration);
        progressBar.style.width = size + 'px';
    }
    else {
        currentTime.innerHTML = "0.00";
        playButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd8c/UEl9FgLZ8Uk.jpg)';
        progressBar.style.width = '0px';
        window.clearInterval(updateTime);
    }
}
function clickedBar(e) {
    if(!mytrack.ended) {
        var mouseX = e.pageX - bar.offsetLeft;
        var newtime = mouseX*mytrack.duration/barSize;
        mytrack.currentTime = newtime;
        progressBar.style.width =  mouseX + 'px';
    }
}
function pad(d) {
    return (d <10) ? '0' + d.toString() : d.toString();
}