How to add slider to bootstrap modal?

Question

JavaScript

The task is to create a page of images from the "brick" masonry (I use masonry) with the opening of each image separately in a modal window. I use bootstrap for the modal and slick slider for the slider.

Image block code

<div class="col-xs-12 col-sm-4 col-md-2 masonry nopadding">
  <div class="mwrap"  data-toggle="modal" data-target="#myModal">
    <img class="img-responsive" data-value="1" src="/img/test/1.jpg">
    <p class="wdesc-hide">Описание изображения</p>
  </div>
</div>

Modal code (one modal for all blocks)

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body row">
            	<div class="wimg-block">
                	<img class="wimg img-responsive" src="" />
                </div>
                <div class="wdesc-block ">
                	<p class="wdesc"></p>
                	<div class="wslider">
        сюда генерятся блоки с img		
      </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS code
1. Launching masonry
2. Launching the slick slider
3. Launching the modal: we take the data (image and text) from the image block and add it to the modal (in order not to create a separate html modal for each image block)
It’s a little more complicated with the slider , the meaning of the slider is to show "similar images", I select similar images by data-value using .map()

(function($) {
    var $grid = $('.masonry-container').masonry({
        itemSelector: '.masonry',
        percentPosition: true,
        columnWidth: '.masonry'
    });
    $grid.imagesLoaded().progress(function() {
        $grid.masonry();
    });

    $(document).ready(function() {

        function createSlick() {
            $(".wslider").not('.slick-initialized').slick({
                dots: true,
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: true
            });
        }

        $('.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()
            var elements = $();
            for (x = 0; x < arr.length; x++) {
                elements = elements.add('<div><img src="' + arr[x] + '"></div>');
            }

            $('#myModal').on('show.bs.modal', function() {
                $(".wimg").attr("src", img);
                $(".wdesc").html(desc);
                $('.wslider').append(elements);
                createSlick();
                $(window).on('resize', createSlick);
            });
        });

        $('#myModal').on('hidden.bs.modal', function() {
        })
    });
})(jQuery);

The slider works when switching to the first modal window, but if I open subsequent windows, additional arrays are created and everything collapses. I can not understand how to solve the problem correctly and where the jamb crept in. Thank you very much for your help.