Tengo alrededor de 18 imágenes en la página que intento mostrar más grandes en modo modal al hacer clic en la imagen, pero solo muestra la primera imagen cada vez.

He intentado atravesar el DOM con$(this).find('img') y lo probé con niños, también intenté configurar las imágenes en diferentes identificadores y establecerlos como una variable.

Mi intento actual fue establecer la ruta de la imagen pequeña en la misma identificación que la ruta de la imagen más grande y luego usar find. Solo tengo las dos primeras imágenes "configuradas" por ahora, ya que todavía no puedo hacerlo funcionar.

Por cierto, he probado otros métodos de acercamiento y popovers y complementos sin éxito tampoco, esto es lo más cerca que he llegado de algo que funciona.

Nota:Hay otra pregunta que muestra casi el mismo problema, pero la respuesta allí no funcionó para mí.

<img  height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='~/Content/MyPics/TextDollarPart1.JPG' alt='Text dollar code part one.' />  
<div id="myModal" class="modal fade" >
    <div class=" modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="1"src="~/Content/MyPics/TextDollarPart1.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>   
<img  height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src="~/Content/MyPics/TextDollarPart2.JPG" alt="Text dollar code part two." />
<div id="myModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="2" src="~/Content/MyPics/TextDollarPart2.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>

Guión

$(document).ready(function () {       
    $('img').on('click', function () {
        var picID = $(this).attr('id');
         $(this).find('picID');
        $('picID').modal('toggle');      
    });
});