index.html

<table id="mytable" border="1">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

<p id="add">ADD</p>

<ul id="foo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ul id="bar">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

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

<script src="stuff.js"></script>

stuff.js

"use strict";

console.log("start");

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


$("#foo li").click(function () {
    console.log(this);
//     $(this).text(Number($(this).text()) + 1);
     $("#bar").append($(this).detach());
});


console.log("end");