Как правильно искать элементы в DOM и записывать результаты в массив?

[MouseOver]

Есть страница с изображениями, каждое из которых можно открыть в модальном окне bootstrap, Данные для заполнения окна беру через html. Кликаю по картинке, забираю ссылку на изображение, описание и вывожу в модальном.
Так же в модальном хочу вывести слайдер с похожими изображениями, сортировать их по значению data-value например. Вот что получилось:

$('.mwrap').on('click', function() { //кликаем на блок с картинкой
            var img = $('img', this).attr('src'); //забираем данные
            var desc = $('p', this).html();
            var value = $('img', this).attr('data-value');
            var arr = $('img[data-value="'+value+'"]').map(function() { return this.src; }).get(); //здесь со всей страницы формируем массив с ссылками на похожие изображения отсортированные по data-value
            var elements = $();
            for(x = 0; x < arr.length; x++) { 
            elements = elements.add('<div><img src="'+arr[x]+'"></div>'); //создаем html для слайдера
            }
            $('#myModal').on('show.bs.modal', function() { //вызываем модалку
                $(".wimg").attr("src", img); //добавляем данные в html модального окна
                $(".wdesc").html(desc);
                $('.wslider').append(elements);  //добавляем html для слайдера
            });
        });

Данный код работает только для первого вызова модального окна, если не перезагружая страницу вызывать следующие окна, то массив arr дублируется и слайдер рушится. Как правильно сделать выборку src нужных изображений и выводить в модальном окне в качестве слайдера? Спасибо.

[рони]

MouseOver,
лучше бы макет полностью, а так var для х, и что значит дублируется может $('.wslider').append(elements); заменить на html?

[MouseOver]

MouseOver,
лучше бы макет полностью, а так var для х, и что значит дублируется может $('.wslider').append(elements); заменить на html?

http://bogdan.tw1.ru/works вот ссыль
Посмотрите, вывожу массив в консоль.

[рони]

MouseOver,
возможный вариант ...

jQuery(function() {
    var img, desc, elements;
    jQuery(".mwrap").on("click", function() {
        img = jQuery("img", this).attr("src");
        desc = jQuery("p", this).html();
        var value = jQuery("img", this).data("value");
        jQuery(".wslider").html("");
        elements = jQuery.map(jQuery('img[data-value="' + value + '"]'), function(img) {
            return jQuery("<div/>" , {html : $(img).clone()})
        })
    });
    jQuery("#myModal").on("show.bs.modal", function() {
        jQuery(".wimg").attr("src", img);
        jQuery(".wdesc").html(desc);
        jQuery(".wslider").html(elements)
    })
});

[рони]

MouseOver,
немного поправил смотрите снова.

up

[MouseOver]

рони,
Поставил код на страницу, вроде ок все, только слайдер запускается только один раз, далее просто изображения выводятся. Подскажите как запускать его для каждого окна? Спасибо

[рони]

MouseOver,
читать доку на slick про slickAdd и slickRemove и циклом вместо map
пока грубо разрушение при закрытии модального окна

jQuery(".mwrap").on("click", function() {
         var img, desc, elements;
        img = jQuery("img", this).attr("src");
        desc = jQuery("p", this).html();
        var value = jQuery("img", this).data("value");

        elements = jQuery.map(jQuery('img[data-value="' + value + '"]'), function(img) {
            return jQuery("<div/>" , {html : $(img).clone()})
        })
        jQuery(".wimg").attr("src", img);
        jQuery(".wdesc").html(desc);
        jQuery(".wslider").html(elements)
        $(".wslider").slick({
                  dots: true,
                  slidesToShow: 3,
                  slidesToScroll: 1,
                  autoplay: true
              });



    });
    jQuery("#myModal").on("hide.bs.modal", function() {
        jQuery(".wslider").slick('destroy').html("");
    })

[MouseOver]

рони,
Большущее спасибо , жалко не могу плюсануть http://prntscr.com/cynjad
Вы кстати каким слайдером пользуетесь?)

[рони]

MouseOver, любым
проще написать свой
Автоматизация слайдера