JQuery also loaded by hosting site, events run multiple times

Question

After trying several lightbox variations and in the interest of getting back in practice and learning JQuery, decided to try coding my own http://walczak.000webhostapp.com/index.html. The hosting site for a project I'm working on looks to also be loading some form of JQuery. The behavior I'm seeing happens on the 3D pages where I need to present a gallery of images. The first time a gallery is opened, both clicking on a thumbnail image and using the Next / Previous buttons works as expected. However when a second gallery instance is opened, when using the Next / Previous buttons, every other image seems to be shown. 3rd time, every 3rd image. Debugging shows that JQuery is running multiple times. I have tried suggestions from click() event is calling twice in jquery with no success.

Also help with why a thumbnail needs to be clicked before the Next / Previous buttons will work (did not have this problem at first) and what I may have missed to solve the dreaded TypeError cannot read property inside the document.ready function on the thumbnail array would be appreciated. relevant code is:

On main page
<div class="boxback">
    <div class="box">
    <table>
       <tr>
         <td><a id="prev" href="#"><img class="galleryNav" src="./backgrounds/buttons/lightbox/back.png"></a></td>
         <td><img id="imgbox" src="" alt=""></td>
         <td><a id="next" href="#"><img class="galleryNav" src="./backgrounds/buttons/lightbox/forward.png"></a></td>
       </tr>
        <tr>
            <td></td>
            <td><p id="caption"></p></td>
            <td></td>
        </tr>
    </table>

       <div id="thumbs"></div>
       <a id="myClose" href="#"><img src="./backgrounds/buttons/lightbox/close.png"></a>
    </div>
</div>    

...

Loaded content
<ul class="thumbsdiv">
    <li class="clkthumb"><img class="thumbnail" src="./davinci/large/gears/gearsmain.png" alt="Original DaVinci drawing" data-index=0></a></li> 
    <li class="clkthumb"><img class="thumbnail" src="./davinci/large/gears/gears01.png" alt="" data-index=1></a></li>
    <li class="clkthumb"><img class="thumbnail" src="./davinci/large/gears/gears02.png" alt="" data-index=2></a></li>
    <li class="clkthumb"><img class="thumbnail" src="./davinci/large/gears/gears03.png" alt="" data-index=3></a></li>
    (abbreviated ...)
</ul>   

JQuery
var mypath = "";
var myindex = Number(0);
//var imgs = [];

$(document).ready(function()
{
  $(".overlay").click(function()
    {
    mypath = $(this).attr("data-gallery");
    mypath += " .thumbsdiv";        

    $("#thumbs").load(mypath);
    $(".boxback").css("display","block");
    $(".box").css("display","inline-block");
    $("#imgbox").attr("src",$(this).attr("data-image"));
    $("#imgbox").attr("alt",$(this).attr("data-alt"));
    $("#caption").text($(this).attr("data-alt"));
    myindex = Number($(this).attr("data-index"));

    do{
        if (document.readyState === "complete") 
            {                                       $(document).on("click",".thumbnail",thumbClick);
            $(document).on("click","#prev,#next",nextImg);
            $(".thumbnail")[myindex].trigger("click");
            //$('[data-index = "0"]').click();
            }
        } while(document.readyState !== "complete");
    })
});

function thumbClick()
{   
//   $("#imgbox").attr("src","");
//   $("#imgbox").attr("alt","");
   $("#caption").text("");
   $("#imgbox").attr("src",$(this).attr("src"));
   $("#imgbox").attr("alt",$(this).attr("alt"));
    myindex = Number($(this).attr("data-index"));
   $("#caption").text($(this).attr("alt"));
$(".thumbnail").css({"border-style":"none"});
$(this).css({"border-style":"solid",
            "border-color":"#000",
            "border-size":"1px"});
 event.stopImmediatePropagation();
};

//$("#prev,#next").click(function nextImg()
function nextImg()
{
    var imgs = $(".thumbnail");

   if ($(this).attr("id") == "next")
    {myindex++;}
   else {myindex--;}

   if (myindex <= -1)
    {myindex = imgs.length - 1;}

   if (myindex >= imgs.length)
    {myindex = 0;}

    imgs[myindex].click();
};