Images not displaying on dynamic generated content

I’m working on uploading multiple images one at a time by dynamically generating the input field and image element. However, my code doesn’t display the images on the dynamically generated image element.

<button type="button" class="btn btn-sm btn-info add-image"><i class="ti-image"></i>  Add image</button>
<br><br>
<div class="images"></div>

$(document).ready(function() {
  var max_image = 10;
  var count = 1;

  $('.add-image').click(function(e) {
    e.preventDefault();
    if (count < max_image) {
      count++;
      $('.images').append(`<div class="input" style="width:100px;height:120px;border:2px dashed lightgrey;float:left;margin:8px">    
        <input type ="file" class ="fileup 1" id ="file'+count+'" style="width:100%; height:100%; opacity:0; position: absolute">    
        <img id ="image'+count+'" src="" style="width:100%; height:100%;">    
        <span class="btn btn-sm btn-danger delete" style="position:relative;bottom:20px"><I class="ti-trash"></i></span>    
      </div>`);

      $(document).on('change', '#file' + count, function() {
        readURL(this);
      });

      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
            $('#image' + count).attr('src', e.target.result);
          }
          reader.readAsDataURL(input.files[0]);
        }
      }
    } else {
      alert("Only a maximum of 10 images is allowed");
    }
  });

  $('.images').on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    y--;
  })
});

Answer

Instead of making event handler for all files use can just one event handler and then inside your readURL function use .closest('div').find('img') to add src to image tag.

Demo Code :

$(document).ready(function() {
  // allowed maximum input fields
  var max_image = 10;

  // initialize the counter for textbox
  var count = 1;

  // handle click event on Add More button
  $('.add-image').click(function(e) {

    e.preventDefault();

    if (count < max_image) {

      count++; // increment the counter

      // validate the condition

      $('.images').append(`<div class="input" style="width:100px;height:120px;border:2px dashed lightgrey;float:left;margin:8px">

<input type ="file" class ="fileup 1" id ="file'+count+'" style="width:100%; height:100%; opacity:0; position: absolute">

<img id ="image'+count+'" src="" style="width:100%; height:100%;">

<span class="btn btn-sm btn-danger delete" style="position:relative;bottom:20px"><I class="ti-trash"></i></span>

</div>`); // add input field
 } else {
      alert("Only a maximum of 10 images is allowed");
    }
 });

  // handle click event of the remove link
  $('.images').on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); // remove input field
    y--; // decrement the counter
  })
  
  //put this outside..
  $(document).on('change', '.images input[type=file]', function() {
    readURL(this);
  });

  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
      //get closest div and then find img add img there
        $(input).closest('div').find('img').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-info add-image"><i class="ti-image"></i>  Add image</button>
<br><br>
<div class="images"></div>