JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="lib">
    <li>
        <img class='my_image' src='http://wcdn1.dataknet.com/static/resources/icons/set95/5076c9d9.png'>
    </li>
    <li>
        <img class='my_image' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png'>
    </li>
</ul>Click the image to make clone and then click save btn to store in local sorage html5 and after that refresh to retreave the images in below box
<div class="block" id="block_test"></div>
<input id="button" type="button" value="save">

CSS

.lib {
    border:1px solid #000;
}
.lib li {
    display:inline;
}
.lib img {
    width:100px;
}
#block_test {
    border:1px solid #000;
    height:300px;
}

JavaScript

$(".my_image").click(function () {
    $(this).clone().addClass('input').removeClass('my_image').appendTo(".block").freetrans({
        x: 0,
        y: 0
    });
});

function setBackground() {
    localStorage.input = $(".input").attr('src');
}

function loadBackground() {
    if (localStorage.input.length == 0) {
        localStorage.input = "empty";
    } else {
        var img_elem = $('<img id="output">');
        img_elem.attr('src', localStorage.input).addClass('input').removeClass('my_image').appendTo(".block").freetrans({
            x: 0,
            y: 0
        });

        localStorage.input = $(arr[0]).attr('src');
    }
}

$("#button").click(function () {
    setBackground();
});