var counter = 0; $(document).ready(function(){ $("li > span").click(function(){ var span = $(this); var img = $("img#add").copy().attr('src', function() { return this.src.replace("add", "undo"); }); img.click(function(){ var input = $(this).prev(); $(this).remove(); input.fadeOut("slow", function() { span.toggle(); }); input.val(span.text()); }); span.toggle(); $(this).next().fadeIn("slow", function() {$(this).after(img); }); }); $("img#add").click(function(){ var input = $("input#new").copy(); var img = $(this).copy().attr('src', function() { return this.src.replace("add", "minus"); }); img.click(function() { $(this).parent().fadeOut("slow", function() { $(this).remove(); }) }); input.attr('name', function() { return this.name + counter; }) .removeAttr('style') .insertBefore($(this).parent()) .wrap("
  • "); input.parent().append(img) .hide().fadeIn("slow", function (){ input.focus(); }); counter = counter + 1; }); })