заполнить поле динамического изображения с помощью jquery

Question

У меня есть динамические настройки div, как указано ниже.

    var max_fields_limit      = 5; 
            var x = 0; 
            $('#add_more_button').click(function(e){
                e.preventDefault();
                if(x < max_fields_limit){ 
                    x++; 

           $('.new_custom_field').append(
'<div>'+
'<div id="main_row" class="form-group row justify-content-md-center">'+
'<div class="text-center">'+
'<img id="image_pre'+x+'" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_169f7db97f3%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_169f7db97f3%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2275.5%22%20y%3D%22104.8%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" class="rounded image_pre" alt="...">'+
'</div></div>'+
'<div class="form-group row">'+
'<label for="c-password" class="col-12 col-sm-12 col-md-4 col-lg-3 col-form-label">Product Url</label>'+
'<div class="col-12 col-sm-12 col-md-8 col-lg-6 input_fields_container">'+
'<input type="text" name="product[]" class="form-control"  required>'+
'</div>'+
'</div>'+
'<div class="form-group row">'+
 '<label for="c-password" class="col-12 col-sm-12 col-md-4 col-lg-3 col-form-label">Image Url</label>'+
 '<div class="col-12 col-sm-12 col-md-8 col-lg-6 input_fields_container">'+
'<input type="text" id="inputimg'+x+'"" name="productimg[]" class="form-control inputimg" required>'+
'</div>'+
'</div>'+
'<div class="form-group col-md-12 text-center">'+ 
'<a class="btn btn-danger remove_button">'+
'<i class="fa fa-minus" aria-hidden="true"></i></a>'+
'<div>'+
'</div>');

Результат от предупреждения: image_pre '+ x +' = image_pre1

$('.new_custom_field').on('click', '.inputimg', function(e){
        var id = $('.image_pre').attr("id");
      var inputVal = $(this).val();
       alert(id);
     // $('#'+id).attr('src', inputVal).fadeIn();
    });

каждый раз, когда я меняю изображение из динамической строки, я обнаруживал один и тот же результат в оповещении. в основном я хочу каждый раз уникальный идентификатор.

Answer 1

Проверьте этот код, надеюсь, он поможет

var max_fields_limit      = 5; 
    var x = 0; 
    $('#add_more_button').click(function(e){
     e.preventDefault();
        if(x < max_fields_limit){ 
        x++; 
 $('.new_custom_field').append(
'<div>'+
'<div id="main_row" class="form-group row justify-content-md-center">'+
'<div class="text-center">'+
'<img id="image_pre'+x+'" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_169f7db97f3%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_169f7db97f3%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2275.5%22%20y%3D%22104.8%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" class="rounded image_pre" alt="...">'+
'</div></div>'+
'<div class="form-group row">'+
'<label for="c-password" class="col-12 col-sm-12 col-md-4 col-lg-3 col-form-label">Product Url</label>'+
'<div class="col-12 col-sm-12 col-md-8 col-lg-6 input_fields_container">'+
'<input type="text" name="product[]" class="form-control"  required>'+
'</div>'+
'</div>'+
'<div class="form-group row">'+
 '<label for="c-password" class="col-12 col-sm-12 col-md-4 col-lg-3 col-form-label">Image Url</label>'+
 '<div class="col-12 col-sm-12 col-md-8 col-lg-6 input_fields_container">'+
'<input type="text" id="inputimg'+x+'"" name="productimg[]" class="form-control inputimg" data-id="image_pre'+x+'" required>'+
'</div>'+
'</div>'+
'<div class="form-group col-md-12 text-center">'+ 
'<a class="btn btn-danger remove_button">'+
'<i class="fa fa-minus" aria-hidden="true"></i></a>'+
'<div>'+
'</div>');

}
})
   $('.new_custom_field').on('click', '.inputimg', function(e){
       var id = $(this).attr("data-id");
        var inputVal = $(this).val();
       alert(id);
      $('#'+id).attr('src', inputVal).fadeIn();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="new_custom_field"></div>
<button id="add_more_button">Add</button>