WP Widgets selective refresh and owl carousel issue

I am trying to add a carousel, Owl script, and I am also using selective refresh in widgets.

Each widget is a carousel item/slide, I got the carousel to reinitialize when a widget is added, the problem is I can’t change the items position when I move those widgets.

The script looks like this:

$( document ).ready(function() {
        var newCarousel = $('carousel');
        newCarousel.owlCarousel({
            responsiveClass:true,

            responsive:{
                0:{
                    items:1,
                    nav:true
                },
                600:{
                    items:2,
                    nav:false
                },
                1000:{
                    items:4,
                    nav:true,
                    loop:false
                }
            }
        });

        $('.next').click(function(event) { event.preventDefault(); newCarousel.trigger('next.owl.carousel', [200]); });
        $('.prev').click(function(event) { event.preventDefault(); newCarousel.trigger('prev.owl.carousel', [200]); });

        if ( 'undefined' !== typeof wp && wp.customize  ) {
            wp.customize.selectiveRefresh.bind( 'sidebar-updated', function( sidebarPartial ) {
                if ( 'sidebar-id' === sidebarPartial.sidebarId ) {
                        newCarousel.data('owlCarousel').destroy();
                        newCarousel.removeClass('owl-carousel owl-loaded');
                        newCarousel.find('.owl-stage-outer').children().unwrap();
                        newCarousel.removeData();
                        newCarousel.owlCarousel();
                }
            });
        }
    });

Thanks in advance!