Javascript unable to change image src when using onclick

I have a table with a number of thumbnails of images and then when you click on an image a modal popup opens and then displays it full screen.

The HTML Code for the thumbnails is:

<img src='@EngDwgListReturn.EngDwgTnURL' class="" onclick="changedata('@EngDwgListReturn.EngDwgURL')">

With the onclick Function being:

function changedata(ImageURL) {         
        document.getElementById("DwgModelURL").src = ImageURL;
        $("#DwgModal").modal('show');
    }

When you click on a thumbnail it displays it full screen correctly for the first time, but when you click on another one it doesn't show the new image, just the first one you clicked.

What am I doing wrong please?

Many thanks

Solution

I tested your code,it work for me,below is a simple demo,you can check it.

Model

public class Image
{
    public List<EngDwgListReturn> EngDwgListReturn { get; set; }
}

public class EngDwgListReturn
{
    public string EngDwgTnURL { get; set; }
}

PageModel

 public class IndexModel : PageModel
{
    [BindProperty]
    public  Image Image { get; set; }
    public void OnGet()
    {
        Image = new Image
        {
            EngDwgListReturn = new List<EngDwgListReturn>
           {
              new EngDwgListReturn
              {
                  EngDwgTnURL="/images/aa.jpg"
              },
              new EngDwgListReturn
              {
                  EngDwgTnURL="/images/bb.jpg"
              },
               new EngDwgListReturn
              {
                  EngDwgTnURL="/images/cc.jpg"
              }
           }
        };
        }
}

wwwroot/Images

Page

@page
@model IndexModel
<body>
    <div class="modal" id="DwgModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Picture info</h4>
                </div>
                <div class="modal-body">
                    <img id="DwgModelURL" width="450" height="200" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
@foreach (var EngDwgListReturn in Model.Image.EngDwgListReturn)
{
    <img src='@EngDwgListReturn.EngDwgTnURL' width="40" height="50" onclick="changedata('@EngDwgListReturn.EngDwgTnURL')" />
}
@section Scripts
{
    <script>
        function changedata(ImageURL) {
            document.getElementById("DwgModelURL").src = ImageURL;
            $("#DwgModal").modal('show');
        }
    </script>
}

Test