jQuery - clone() function doesn't work

Question

I want to clone images and texts from another HTML element, but it doesn't work. I've tried the append() function before which works fine, but it removes the content from the original source element.I think the problem is with objects stored in variables.

$(function () {

    // GLOBALS AND VARS
    var $device = $('.device'),
        $device__screen = $('.device__screen'),
        $text__area = $('.text-area'),
        $controls__left = $('.controls__left'),
        $controls__right = $('.controls__right'),
        $stack = $('.stack'),
        $stack__item = $('.stack > .stack__item'),
        $copy__img = $(),
        $copy__text = $(),
        item__count = $stack__item.length - 1,
        current__item = 0,
        animation = false;


    // function to verify if current item isn't last

    function check__current__item () {
        if (current__item < item__count) {
            current__item++;
        } else {
            current__item = 0;
        }
    }

    // function load assets to variables
    // children 0 is img
    // children 1 is text
    function load__assets () {
        $copy__img = $stack__item[current__item].children[0].outerHTML;
        $copy__img.clone().appendTo('$device__screen');

        $copy__text = $stack__item[current__item].children[1].innerHTML;
        $copy__text.clone().appendTo('$text__area');
        
        check__current__item();

    }

    load__assets();

    $controls__right.on('click', function (e) {
        e.preventDefault();
        load__assets();
    })


});

.stack {
    display: none;
}
.device {
    background: url(https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_05-512.png) no-repeat;
    width: 512px;
    height: 512px;
    display: inline-block;
}
.device__screen {
    margin: 200px 0 0 200px;
    width: 194px;
    height: 310px;
    float: left;
}
.controls__left,
.controls__right {
    width: 128px;
    height: 128px;
    background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png) no-repeat;
    float: left;
}
.controls__right {
    background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png) no-repeat;
    margin-left: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="app__wrapper" class="row">
    <div class="grid-g__col_7 text_centered">
        <div class="device">
            <div class="device__screen">

            </div>
        </div>
    </div>
    <div class="grid-g__col_5">
        <div class="text-area">

        </div>
        <div class="controls">
            <a href="#" class="controls__right"></a>
        </div>
    </div>
</div>

<div class="stack">
    <div class="stack__item">
        <img src="https://cdn1.iconfinder.com/data/icons/logo-s-icon-pack-collection/512/whatsup-128.png" alt="">
        <div class="text_content">
            <h3>1. Sed ut perspiciatis iste natus error siT</h3>
            <p>accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>
        </div>
    </div>
    <div class="stack__item">
        <img src="https://cdn1.iconfinder.com/data/icons/logo-s-icon-pack-collection/783/twitter-128.png" alt="">
        <div class="text_content">
            <h3>2. Sed ut perspiciatis iste natus error siT</h3>
            <p>accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>
        </div>
    </div>
    <div class="stack__item">
        <img src="https://cdn1.iconfinder.com/data/icons/logo-s-icon-pack-collection/777/vkontakte-128.png" alt="">
        <div class="text_content">
            <h3>3. Sed ut perspiciatis iste natus error siT</h3>
            <p>accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>
        </div>
    </div>
</div>

Answer 1

.clone() is a jQuery method, You need a jQuery object to use it.

//Here outerHTML will return string content
$copy__img = $stack__item[current__item].children[0].outerHTML;

//Convert string to jQuery object and use the clone function
//Use correct variable with  appendTo
$($copy__img).clone().appendTo($device__screen);