How to update the video source in JQuery?

Question

I am using the following code to open 3 videos. I have 3 thumbnails and once I click on one of them the video assigned to that thumbnail should start. On first load if I click on first thumbnail will start the video normally. After that if I click on the second thumbnail will start the same video. After I refresh the page and I click on second thumbnail the second video start. But if I try to open the first video it plays the second video. Any idea how to update this?

function playVideo(){
    if(!vidInitialized){
        vidInitialized = true;
        $('#video').append( "<source type='video/mp4'></source>" );
        initVideo('pause');
    }else{
        video.currentTime=0;
    }
    audioOn();
    video.play();
    video.addEventListener("ended", videoEnd);
}

function videoEnd() {
    $('source').attr("src", "");
    controlls.vidPause();
}

function addEventListeners() {
    $("#video1").click(function() {playVideo(); $('source').attr("src", "video/video1.mp4")});
    $("#video2").click(function() {playVideo(); $('source').attr("src", "video/video2.mp4")});
    $("#video3").click(function() {playVideo(); $('source').attr("src", "video/video3.mp4")});      
}

HTML

<div id="thumbs">
    <img id="video1" src="images/video1.jpg">
    <img id="video2" src="images/video2.jpg">
    <img id="video3" src="images/video3.jpg">
 </div>
<div id="overlay"></div>
<div id="videoContainer" class="videoContainer">         
    <video id="video">
        <!-- video file from JS -->
    </video>
    <div id="close">x</div>
</div>