一个页面上有两个不同的图像预览,但只有一个有效

我在一个页面上有两个不同的上传按钮。一个是Id上传图像btn,另一个是Id上传图像btn查找器。预览被加载到不同的分区中。为此,用户每次想上载时都会收到其图像的预览。我的问题是,只有一个图像预览工作(最后一个),我不知道为什么。

<div class="row" id="images-container-finder"></div>

代码:

 $('#upload-image-btn-finder').click(function (event) {
    event.preventDefault();
    var counter = $(this).data('counter');
    counter++;
    $(this).data('counter', counter);
    var img_html = '<input type="file" name="image-finder-' + counter + '" id="image-input-finder-' + counter + '" accept="image/*" style="display:none">';
    $('#add-post-form-7').append(img_html);
    $('#image-input-finder-' + counter).trigger('click');
    $('#image-input-finder-' + counter).change(function () {
        readURL(this, counter);
    });
});
$(document).on('click', '.special-times-btn', function () {
    var counter = $(this).data('counter');
    $('#special-image-div-finder-' + counter).remove();
    $('#image-input-finder-' + counter).remove();
});
function readURL(input, counter) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var card_html = '';
            card_html += '<div id="special-image-div-finder-' + counter + '" class="col-sm-6">';
            card_html += '<div class="special-image-div">';
            card_html += '<a href="#" class="special-times-btn" data-counter="' + counter + '"><span class="fa fa-times"></span></a>';
            card_html += '<img style="width: auto;max-width: 100%;max-height: 150px;" id="blah" src="' + e.target.result + '" alt="your image" />';
            card_html += '</div>';
            card_html += '</div>';
            $('#images-container-finder').append(card_html);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

视图:

<div class="row" id="images-container"></div>

代码:

 $('#upload-image-btn').click(function (event) {
        event.preventDefault();
        var counter = $(this).data('counter');
        counter++;
        $(this).data('counter', counter);
        var img_html = '<input type="file" name="image-' + counter + '" id="image-input-' + counter + '" accept="image/*" style="display:none">';
        $('#add-post-form-4').append(img_html);
        $('#image-input-' + counter).trigger('click');
        $('#image-input-' + counter).change(function () {
            readURL(this, counter);
        });
    });
    $(document).on('click', '.special-times-btn', function () {
        var counter = $(this).data('counter');
        $('#special-image-div-' + counter).remove();
        $('#image-input-' + counter).remove();
    });
    function readURL(input, counter) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var card_html = '';
                card_html += '<div id="special-image-div-' + counter + '" class="col-sm-6">';
                card_html += '<div class="special-image-div">';
                card_html += '<a href="#" class="special-times-btn" data-counter="' + counter + '"><span class="fa fa-times"></span></a>';
                card_html += '<img style="width: auto;max-width: 100%;max-height: 150px;" id="blah" src="' + e.target.result + '" alt="your image" />';
                card_html += '</div>';
                card_html += '</div>';
                $('#images-container').append(card_html);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }