Как хранить элементы для append () или clone ()

Я сделал очень простые коробки расширения. Структура подобна приведенной ниже

<div class="container"> 
    <div class="item"> </div>  
    <div class="outside"> </div>  <!-- append '.item' children to '.outside'  -->
    <div class="item"> </div>
    <div class="item"> </div> 
</div>

Я хотел бы добиться того, что, если окно открыто, содержимое можно просмотреть сразу же, когда вы нажмете еще один флажок. (Не нужно снова slideUp и снова slideUp slideDown)

Проблема, с которой я сталкиваюсь, заключается в том, что если вы щелкнете по первому прямоугольнику box 1, вы можете увидеть слайдер правильно, тогда вы нажмете box 2, содержимое также будет показано правильно, а затем вы вернетесь в box 1, содержимое выиграет Не показывай. Я понимаю, append все .inside детей '.outside' содержание может быть вид только один раз, как append перемещает элементы в .outside, если я использую clone(), я могу просмотреть содержимое, но потеряет рабочий бегунок.

так что мой вопрос заключается в том, чтобы .inside добавить .inside к '.outside' затем переместить все обратно туда, где было? если кто-то может помочь? Благодарю!

Онлайн-образец http://jsfiddle.net/ny4sx/

Вот мой html

<div class="container">
    <div class="item">1
        <div class="inside">
            <ul class="slider">
                <li>
                    <img src="http://lorempixel.com/580/250/nature/1" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/2" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/3" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/4" />
                </li>
            </ul>
        </div>
    </div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

JQuery

var $outside = $('<div class="outside"></div>');
var $closebutton = $('<div class="close">x</div>');
$outside.append($closebutton);


$('.item').click(function (event) {
    event.preventDefault();
    var $this = $(this);
    $this.toggleClass('active');


    if ($this.hasClass('active')) {
        $('.active').removeClass('active');
        $this.addClass("active");
    }
    if $this.next().hasClass('outside')) {
    console.log('yes');
} else {
    console.log('no');
    $outside.insertAfter(this).css({
        'height': 300
    }).slideDown();

}

$('.close').click(function () {
    $('.outside').remove();
    $('.active').removeClass('active');

});

});

//Slider FROM Here

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

function slides() {
    return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(

function () {
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    slides().eq($i).fadeOut($transition_time);

    if (slides().length == $i + 1) $i = -1; // loop to start

    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');
},
$transition_time + $time_between_slides);