How to use zoomer jquery plugin in product gallery to zoom the large image every time i click on it?

Question

Product gallery view code

<div class="row">

        <div class="col-6">

            <div class="row">
                <div class="col-12">

                    @{
                        string[] AllImages = Model.ProductImage.Split(',');

                }
                    <img src="@AllImages[0]" class="largeimage" style="min-height:300px; max-height:500px;" alt="" />

                </div>
            </div>

            <div class="row">
                <div class="col-12">

                    @for (int i = 0; i<AllImages.Length; i++)
                    {
                        <img src="@AllImages[i]" class="img-thumbnail smallimages" style="max-height:100px;" alt="" />

                    }

                </div>
            </div>

        </div>

Jquery section

@section Scripts{

    <script>

        $(function () { 
       
            $(".smallimages").click(function () {
                var clickedImage = $(this);
               
                $(".largeimage").attr("src", clickedImage.attr("src"));
                
             $(".largeimage").imageZoom({ zoom: 300 });
            });
            
         });</script>
               }

I want to zoom the large image every time i click on the existing images but by using this code i only zoom the first selected image next image is not selectable.