[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 нужных изображений и выводить в модальном окне в качестве слайдера? Спасибо.