Problem getting lightbox modals working with various thumbs and photos

I'm trying to get the modal lightbox work for different thumbs and different large photos.  It works great when you use the same photo for the thumb and the large photo but now they want a different thumb and a different photo.  Here is the code for the thumb:

<img id="myImg1" src="cain-thumb.jpg" width="165" height="200">

<img id="myImg2" src="lennon-thumb.jpg" width="165" height="200">

-----

Here is the modal content for each of the above:

!-- The Modal -->

<div id="myModal" class="modal">

  <span class="close">×</span>

  <img class="modal-content" id="img101" img src="cain-large.jpg">

</div>

<!-- The Modal -->

<div id="myModal" class="modal">

  <span class="close">×</span>

  <img class="modal-content" id="img102" img src="lennon-large.jpg">

</div>

-----

Here is the script.  I keep playing around with it thinking I've fixed it but cannot and I'm not sure which part of the code to tweak so that when the cain thumb is clicked the cain photo opens and then when the lennon thumb is clicked the lennon photo opens:

I also keep getting an error in DW about it must be unique; I tried that and that does not work as well:

<script>

// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption

var img = document.getElementById('myImg1');

var modalImg = document.getElementById("img101");

var captionText = document.getElementById("caption");

img.onclick = function(){

    modal.style.display = "block";

    modalImg.src = this.src;

    captionText.innerHTML = this.alt;

}

// Get the image and insert it inside the modal - use its "alt" text as a caption

var img = document.getElementById('myImg2');

var modalImg = document.getElementById("img102");

var captionText = document.getElementById("caption");

img.onclick = function(){

    modal.style.display = "block";

    modalImg.src = this.src;

    captionText.innerHTML = this.alt;

}

/ Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

}

</script>

-----------------------

Any help is appreciated.  Thanks.