FlexSlider addSlide bug

Adding slides and removing slides doesn't seem to work as expected.

by Md. Atiquzzaman Soikat

HTML

<script src="http://cdn.jsdelivr.net/flexslider/2.2/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/flexslider/2.2/flexslider.css">
<ol>
    <li>Try the slider out, click on the thumbnails to navigate</li>
    <li>Click on 'Remove the rose'</li>
    <li>Stuff still works..</li>
    <li>Click on 'Add the rose'</li>
    <li>Clicking on the rose thumbnail now does nothing</li>
    <li>The rose was correctly added to both sliders</li>
</ol>
<ul id="menu">
    <li>Remove the rose --></li>
    <li>Add the rose --></li>
</ul>
<div id="carousel" class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://31.media.tumblr.com/b1f0b6f76c5a1bdf70759aba33331ca6/tumblr_n13trsIjgV1s3hp12o1_1280.jpg" />
        </li>
        <li class="rose">
            <img src="https://31.media.tumblr.com/48b6e437d3590ac2820a11e9f1a00553/tumblr_n0zzqkNQJO1s3hp12o1_500.jpg" />
        </li>
        <li>
            <img src="https://24.media.tumblr.com/21edae97fbf1b9d4d1f132039d0eaf88/tumblr_n15kxqpZH91rt9y0oo1_1280.jpg" />
        </li>
        <li>
            <img src="https://24.media.tumblr.com/2ea08df9704fe04bc8c6d4dfe009eda0/tumblr_n11rvbI0OB1s3hp12o5_1280.jpg" />
        </li>
        <!-- items mirrored twice, total of 12 -->
    </ul>
</div>
<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://31.media.tumblr.com/b1f0b6f76c5a1bdf70759aba33331ca6/tumblr_n13trsIjgV1s3hp12o1_1280.jpg" />
        </li>
        <li class="rose">
            <img src="https://31.media.tumblr.com/48b6e437d3590ac2820a11e9f1a00553/tumblr_n0zzqkNQJO1s3hp12o1_500.jpg" />
        </li>
        <li>
            <img src="https://24.media.tumblr.com/21edae97fbf1b9d4d1f132039d0eaf88/tumblr_n15kxqpZH91rt9y0oo1_1280.jpg" />
        </li>
        <li>
            <img...

JavaScript

// From example page:
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 100,
    itemMargin: 5,
    asNavFor: '#slider'
});

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
});

// Custom stuff
var saved1;
var saved2;

function removeRose() {
    saved1 = $('#carousel').find('.rose');
    saved2 = $('#slider').find('.rose');
    $('#carousel').data('flexslider').removeSlide($('.rose'));
    $('#slider').data('flexslider').removeSlide($('.rose'));
};

function addRose() {
    $('#carousel').data('flexslider').addSlide(saved1);
    $('#slider').data('flexslider').addSlide($(saved2));
};

$('#menu').on('click', 'li:first', function () {
    removeRose();
});

$('#menu').on('click', 'li:last', function () {
    addRose();
});