index.html

<div id="add">Add!!</div>

<ul id="foo">
    <li>0</li>
    <li>0</li>
    <li>0</li>
    <li>0</li>
    <li>0</li>
    <li>0</li>
    <li>0</li>
    <li>0</li>
    <li>0</li>
</ul>

<hr/>

<ul id="bar">
    <li>1</li>
    <li>1</li>
</ul>



<script src="jquery-2.1.4.js"></script>
<script src="scripts.js"></script>

scripts.js

"use strict";

console.log("start scripts");

$(function() {

    console.log("dom ready");

    $("#add").click(function() {
        $("<li>klom</li>").appendTo($("#foo"));
    });

    $("#foo").on('click', 'li', function() {
        var el = $(this);
        el.fadeOut(1000, function() {
            el.appendTo($("#bar")).fadeIn();
        });
    });

    $("#bar").on('click', 'li', function() {
        var el = $(this);
        el.fadeOut(1000, function() {
            el.appendTo($("#foo")).fadeIn();
        });
    });


});


console.log("end scripts");