JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<link rel="stylesheet" href="http://bxslider.com/css/styles.css">
<script src="cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
  <div id="galleryDiv">

    </div>
    <button id="open">OPEN</button>

CSS

/*! jQuery UI - v1.10.4 - 2014-01-17
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0...

JavaScript

$(document).ready(function() {
    $("#galleryDiv").append("<div id='popUpDialog' title='Add your Images'> <div class='carouselLevelParent'>" +
        "</div></div>");
    $('.carouselLevelParent').append('<div>1</div>');
    $('.carouselLevelParent').append('<div>2</div>');
    $('.carouselLevelParent').append('<div>3</div>');
    $('.carouselLevelParent').append('<div>4</div>');
    $('.carouselLevelParent').after('<button id="select">CLick to add</button>')

    var slider = $('.carouselLevelParent').bxSlider({
        minSlides: 3,
        maxSlides: 4,
        slideWidth: 170,
        slideMargin: 10
    });
    var currentSlider = slider.getCurrentSlide();

    $("#select").on('click', function(event) {
        event.preventDefault();
        $('.carouselLevelParent').append('<div2131</div>');
        
       // alert(currentSlider);
        slider.reloadSlider({
            startSlide: 'currentSlider',
            infiniteLoop: false,
            minSlides: 3,
            maxSlides: 4,
            slideWidth: 170,
            slideMargin: 10
        });
    });

    $("#popUpDialog").dialog({
        appendTo: "#galleryDiv",
        autoOpen: false,
        height: 600,
        width: 450,
        modal: true,
        resizable: false,
        draggable: false
    });
    $("#open").on('click', function() {
        $("#popUpDialog").dialog("open");
        //alert(currentSlider);
        slider.reloadSlider({
            startSlide: 'currentSlider',
            minSlides: 3,
            infiniteLoop: false,
            maxSlides: 4,
            slideWidth: 170,
            slideMargin: 10
        });
    })
});