Два разных превью изображений на одной странице, но работает только один

Question

У меня есть две разные кнопки загрузки на одной странице.Один имеет Id # upload-image-btn, а другой - id # upload-image-btn-finder.Предварительный просмотр загружается в другой div.Для этого пользователь получает предварительный просмотр своего изображения каждый раз, когда он хочет загрузить.Моя проблема в том, что работает только один предварительный просмотр изображения (последний), и я не знаю почему.

Просмотр:

<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]);
        }
    }