Cant bind .change() event with dynamically generated elements

Question

I have a button, when clicking on it the table rows and profile pic instances are generated.

Profile Pic instance which is generated:

            <div class="row justify-content-center" id="owner-pic-row">
       ---->    <div class="col-sm-2 prof-pic-col" id="col-owner-pic-1">
                    <div class="avatar-upload">
                        <div class="avatar-edit">
                            <input type='file' id="imageUploadOwner" accept=".png, .jpg, .jpeg" />
                            <label for="imageUploadOwner"></label>
                        </div>
                        <div class="avatar-preview">
                            <div id="imagePreviewOwner" style="background-image: url('/media/profile_images/default-profile-pic-owner.jpg');">
                            </div>
                            <p class="owner-pic-des">Owner</p>
                        </div>
                    </div>
                </div> <----
            </div>

The code inside ----> code <---- is generated while pressing the button

when clicking the button only one time, overall HTML code:

            <div class="row justify-content-center" id="owner-pic-row">
                <div class="col-sm-2 prof-pic-col" id="col-owner-pic-1">
                    <div class="avatar-upload">
                        <div class="avatar-edit">
                            <input type='file' id="imageUploadOwner" accept=".png, .jpg, .jpeg" />
                            <label for="imageUploadOwner"></label>
                        </div>
                        <div class="avatar-preview">
                            <div id="imagePreviewOwner" style="background-image: url('/media/profile_images/default-profile-pic-owner.jpg');">
                            </div>
                            <p class="owner-pic-des">Owner</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2 prof-pic-col" id="col-owner-pic-2">
                    <div class="avatar-upload">
                        <div class="avatar-edit">
                            <input type='file' id="imageUploadOwner" accept=".png, .jpg, .jpeg" />
                            <label for="imageUploadOwner"></label>
                        </div>
                        <div class="avatar-preview">
                            <div id="imagePreviewOwner" style="background-image: url('/media/profile_images/default-profile-pic-owner.jpg');">
                            </div>
                            <p class="owner-pic-des">Owner</p>
                        </div>
                    </div>
                </div>
            </div>

Below is the JS Script for handling change event :

        function readURL(input, type) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    if (type == "Owner") {
                        $($(input).parent().parent()).find('#imagePreviewOwner').css('background-image', "url('" + e.target.result + "')");
                        $($(input).parent().parent()).find('#imagePreviewOwner').hide();
                        $($(input).parent().parent()).find('#imagePreviewOwner').fadeIn(650);
                    } 
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
      
        $("#owner-pic-row").on("click", "#imageUploadOwner", function() {
       ===> console.log($($(this).parent().parent().parent()).attr("id")) <===
            $(this).change(function () {
                let type = "Owner"
                readURL(this, type);
            });
        })

Now the problem here is when ever I click on the input[id="imageUploadOwner"] in the second profile instance i.e. div[id="col-owner-pic-2"], the code inside ===> <=== prints id="col-owner-pic-1" instead of col-owner-pic-2. This means that when I change the profile pic the image is shown in the first instance everytime, regardless of which instance I want to change. The javascript code which I showed works perfectly for similar kind of logic but not here. What should I do?