javascript - move blocks between two divs -

so have 2 divs , inside there gona blocks:

<div class="list-block 01">     <span>21@epos.com</span>     <span class="movesym" id="01">+</span> </div> 

if 1 clicks on + whole block moves other div. works move ech block div once, need them go both ways as .movesym clicked.

my js

    //remove block on click $('.del-block').on('click', function() {     var block = $(this).attr('id');     $('.' + block).remove(); })  //move form list blocks different fields $('.leftside01 .movesym').click(function() {     console.log($(this).attr('id'));     var id = $(this).attr('id');     $(this).text("-");     $('.leftside01 .list-block.' + id).appendto('.rightside01'); }) $('.rightside01 .movesym').click(function() {     console.log($(this).attr('id'));     var id = $(this).attr('id');     $(this).text("+");     $('.rightside01 .list-block.' + id).appendto('.leftside01'); }) 

i know there plugins this, want write myself , learn :) fiddle http://jsfiddle.net/a1ex5andr/crvvk/

need use event delegation, because handler executed depends on parent element.

//move form list blocks different fields $('.leftside01').on('click', '.movesym', function () {     console.log($(this).attr('id'));     var id = $(this).attr('id');     $(this).text("-");     $('.leftside01 .list-block.' + id).appendto('.rightside01'); }) $('.rightside01').on('click', '.movesym', function () {     console.log($(this).attr('id'));     var id = $(this).attr('id');     $(this).text("+");     $('.rightside01 .list-block.' + id).appendto('.leftside01'); }) 

demo: fiddle