Upload and preview Image in different controls using single FileUpload in jQuery

I have a fileupload control and about 2 to 3 image controls. I want to be able to use this fileupload control to upload images and display them in their respective image controls.

For example, if I click on the fileupload, it will take me to my local storage where I select an image, then the image will be displayed in the first image control. I then click the same fileupload control and select another image, the second image will be displayed in the second image control, and so on....

Is that possible please?

I am guessing that a fileuplaod control is attached to one image at a time. Maybe using an input control could give the desired outcome.

HTML

<asp:FileUpload ID="FileUpload1" runat="server" />
<div class="certcontain col-sm-8" runat="server" id="section" style="width: 100%;">
    <asp:Image Class="imgfile" ID="imgfile" runat="server" />
    <asp:Image Class="imgfile" ID="Image1" runat="server" />
    <asp:Image Class="imgfile" ID="Image2" runat="server" />
</div>

<script type="text/javascript">
    $(function () {
        var fileUpload = $("[id*=FileUpload1]");
        var img = $("[id*=imgfile]");
        var img = $("[id*=Image1]");
        var img = $("[id*=Image2]");
        img.click(function () { fileUpload.click(); });
        fileUpload.change(function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                $("[id*=imgfile]").attr("src", e.target.result);
                $("[id*=Image1]").attr("src", e.target.result);
                $("[id*=Image2]").attr("src", e.target.result);
            }
            reader.readAsDataURL($(this)[0].files[0]);
        });
    });
</script>