Swap thumbnail image and change css for the clicked image

Question

I am trying to swap the images of thumbnails with the main image and then kind of put a border of color blue out of the clicked image. I tried to do document.getelemnt by id and then put the id of the thumbnail image but it changes on the first thumbnail image css not the one which is clicked.

Here is my code and script i am using. I tries the visited css but not working.

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {
    $("#gallery li img").click(function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));

    });
    var imgSwap = [];
     $("#gallery li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
        document.getElementById("thumb-img").style.border = "2px blue solid";
        document.getElementById("thumb-img").style.opacity = "1";
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;

    });
}
</script>

<div class="container">

    <div id="gallery" class="col-md-12">
    <img src="1.png" alt="" id="main-img"/>
    <li id="thumb"><img src="http://cdn.resize.sparkplatform.com/fl/1024x768/true/20161107174518882259000000-o.jpg" alt="" class="img-thumbnail" id="thumb-img" /></li>
     <li id="thumb"><img src="1.png" alt="" class="img-thumbnail"  id="thumb-img"/></li>