JQuery. При присваивании значения input, значение дублируется в соседнем input. Как исправить?

Question

[Павел Виноградов]

Здравствуйте!
HTML:

<li>
<label for="image">Главное изображение: </label>
<div id="main_image">
<img id="main_img" src="{{ !empty( $product->image ) ? $product->image : ( !empty( old('image') ) ? old('image') : '' ) }}" width="250" />
<input id="main_input" type="text" name="image" value="{{ !empty( $product->image ) ? $product->image : ( !empty( old('image') ) ? old('image') : '' ) }}" />
<button id="get_uploader_main">Выбрать</button>
<button class="del-img">Удалить</button>
</div>
</li>
<li>
<label>Галлерея товара: </label>
<div id="product-gallery">
<div id="gallary_0">
<label for="main_gallary_a">Изображение 1</label>
<img id="gal_img0" class="block" src="{{ ( !empty( $product->main_gallary ) && !empty( $product->main_gallary[0] ) ) ? $product->main_gallary[0] : ( !empty( old('main_gallary_0') ) ? old('main_gallary_0') : '' ) }}" width="250" />
<input id="gal_input0" type="text" name="main_gallary_a" value="{{ ( !empty( $product->main_gallary ) && !empty( $product->main_gallary[0] ) ) ? $product->main_gallary[0] : ( !empty( old('main_gallary_0') ) ? old('main_gallary_0') : '' ) }}" />
<button id="get_uploader_0">Выбрать</button>
<button class="del-img">Удалить</button>
</div>
<div id="gallary_1">
<label for="main_gallary_b">Изображение 2</label>
<img id="gal_img1" class="block" src="{{ ( !empty( $product->main_gallary ) && !empty( $product->main_gallary[1] ) ) ? $product->main_gallary[1] : ( !empty( old('main_gallary_1') ) ? old('main_gallary_1') : '' ) }}" width="250" />
<input id="gal_input1" type="text" name="main_gallary_b" value="{{ ( !empty( $product->main_gallary ) && !empty( $product->main_gallary[1] ) ) ? $product->main_gallary[1] : ( !empty( old('main_gallary_1') ) ? old('main_gallary_1') : '' ) }}" />
<button id="get_uploader_1">Выбрать</button>
<button class="del-img">Удалить</button>
</div>
<div id="gallary_2">
<label for="main_gallary_c">Изображение 3</label>
<img id="gal_img2" class="block" src="{{ ( !empty( $product->main_gallary ) && !empty( $product->main_gallary[2] ) ) ? $product->main_gallary[2] : ( !empty( old('main_gallary_2') ) ? old('main_gallary_2') : '' ) }}" width="250" />
<input id="gal_input2" type="text" name="main_gallary_c" value="{{ ( !empty( $product->main_gallary ) && !empty( $product->main_gallary[2] ) ) ? $product->main_gallary[2] : ( !empty( old('main_gallary_2') ) ? old('main_gallary_2') : '' ) }}" />
<button id="get_uploader_2">Выбрать</button>
<button class="del-img">Удалить</button>
</div>
</div>
</li>

JQuery:

$('#get_uploader_main').on('click', function (e) {
        e.preventDefault();
        $('#media_uploader_bg').css('display', 'block');
        $('#media_uploader').css('display', 'block');
        $('#insert_media_button').attr('id', 'insert_media_button_main');
        $('#media_uploader_content').on('click', function () {
            $('#media_uploader_content .uploaded-img img').on('click', function () {
                $(this).next('input[type="radio"]').trigger('click');
                $('#insert_media_button_main').prop('disabled', false);
            });
        });
        $('#insert_media_button_main').on('click', function (e) {
            e.preventDefault();
            var src300 = $('#media_uploader_content .uploaded-img :checked').prev().attr('src');
            var src = src300.replace('-300x300', '');
            $('#main_img').attr('src', src300);
            $('#main_input').val(src);
            $('#media_uploader_bg').css('display', 'none');
            $('#media_uploader').css('display', 'none');
            $(this).attr('id', 'insert_media_button');
        });
    });
    $('#get_uploader_0').on('click', function (e) {
        e.preventDefault();
        $('#media_uploader_bg').css('display', 'block');
        $('#media_uploader').css('display', 'block');
        $('#insert_media_button').attr('id', 'insert_media_button_0');
        $('#media_uploader_content').on('click', function () {
            $('#media_uploader_content .uploaded-img img').on('click', function () {
                $(this).next('input[type="radio"]').trigger('click');
                $('#insert_media_button_0').prop('disabled', false);
            });
        });
        $('#insert_media_button_0').on('click', function (e) {
            e.preventDefault();
            var src300_0 = $('#media_uploader_content .uploaded-img :checked').prev().attr('src');
            var src0 = src300_0.replace('-300x300', '');
            $('#gal_img0').attr('src', src300_0);
            $('#gal_input0').val(src0);
            $('#media_uploader_bg').css('display', 'none');
            $('#media_uploader').css('display', 'none');
            $(this).attr('id', 'insert_media_button');
        });
    });
    $('#get_uploader_1').on('click', function (e) {
        e.preventDefault();
        $('#media_uploader_bg').css('display', 'block');
        $('#media_uploader').css('display', 'block');
        $('#insert_media_button').attr('id', 'insert_media_button_1');
        $('#media_uploader_content').on('click', function () {
            $('#media_uploader_content .uploaded-img img').on('click', function () {
                $(this).next('input[type="radio"]').trigger('click');
                $('#insert_media_button_1').prop('disabled', false);
            });
        });
        $('#insert_media_button_1').on('click', function (e) {
            e.preventDefault();
            var src300_1 = $('#media_uploader_content .uploaded-img :checked').prev().attr('src');
            var src1 = src300_1.replace('-300x300', '');
            $('#gal_img1').attr('src', src300_1);
            $('#gal_input1').val(src1);
            $('#media_uploader_bg').css('display', 'none');
            $('#media_uploader').css('display', 'none');
            $(this).attr('id', 'insert_media_button');
        });
    });
    $('#get_uploader_2').on('click', function (e) {
        e.preventDefault();
        $('#media_uploader_bg').css('display', 'block');
        $('#media_uploader').css('display', 'block');
        $('#insert_media_button').attr('id', 'insert_media_button_7');
        $('#media_uploader_content').on('click', function () {
            $('#media_uploader_content .uploaded-img img').on('click', function () {
                $(this).next('input[type="radio"]').trigger('click');
                $('#insert_media_button_7').prop('disabled', false);
            });
        });
        $('#insert_media_button_7').on('click', function (e) {
            e.preventDefault();
            var src300_2 = $('#media_uploader_content .uploaded-img :checked').prev().attr('src');
            var src2 = src300_2.replace('-300x300', '');
            $('#gal_img2').attr('src', src300_2);
            $('#gal_input2').val(src2);
            $('#media_uploader_bg').css('display', 'none');
            $('#media_uploader').css('display', 'none');
            $(this).attr('id', 'insert_media_button');
        });
    });

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


P.S. Прошу прощения за несовершенный код.

Answer 1

[Павел Виноградов]

Оказалось, что поскольку было добавленно несколько слушателей события клика по кнопке вставки в медиабиблиотеке ( #insert_media_button_0 ), то даже динамическое изменение ID этой кнопки не помогает - слушатель первого блока инпута уже добавлен после выбора первого изображения и при вставке второго, хотя у кнопки и изменен был ID, первый слушатель также срабатывает. Решение нашел одно - под каждый блок изображения создать отдельный экземпляр медиабиблиотеки.