javascript - image preview before upload not working with + image+_row -

when select image should preview image. when add var image_row onchnage not work.

i trying make work onclick function function add_popup_image()

codepen example here

working single id

$("#fileupload_extra_image").change(function(){ if (this.files && this.files[0]) {     var reader = new filereader();     reader.onload = function (e) {         $('#input-popup-image').attr('src', e.target.result);     }     reader.readasdataurl(this.files[0]); } }); 

not working

$('#fileupload_extra_image' + image_row).change(function(){ if (this.files && this.files[0]) {     var reader = new filereader();     reader.onload = function (e) {         $('#input-popup-image' + image_row).attr('src', e.target.result);     }     reader.readasdataurl(this.files[0]); } }); 

question: how can make + image_row work image preview script

the below problem:

image_row used return +1 i.e. if there existed input-popup-image1 retrieved input-popup-image2. time being negated value before searching id. need take care of increment of image_row or below code work fine.

pen here

$('#fileupload_extra_image' + image_row).on('change',function(){     if (this.files && this.files[0]) {       var reader = new filereader();       var imgrw=image_row-1;       reader.onload = function (e) {             $('#input-popup-image' + imgrw).attr('src', e.target.result);       }       reader.readasdataurl(this.files[0]);     } }); 

update

to problem mentioned in comments suggest choose below approach:

updated pen

add classname dynamically added controls image_preview , browse , obtain preview content inside root parent .row. so, avoid obtaining id , keeping track of image_row value:

$(document).on('change','.file',function(){     if (this.files && this.files[0]) {         var imgpr=$(this).parents('div.row').find('.imgpr')         var reader = new filereader();         reader.onload = function (e) {             $(imgpr).attr('src', e.target.result);         }         reader.readasdataurl(this.files[0]);     } });