Javascript Jquery将元素从一个div移动到另一个div

我有两个列表：第一个显示在左侧，第二个显示在右侧。 我想，如果我点击左边的一个元素，他将被移除，并被添加到右边的列表中（以及相反的操作）

这是我的html：

<div class="cont">
   <div  id="groupL" class="innDiv">
       <div id="1" class="aaaL">Value 1</div>
       <div id="2" class="aaaL">Value 2</div>
   </div>
   <div  id="groupR" class="innDiv">
       <div id="4" class="aaaR">Value 4</div>
       <div id="3" class="aaaR">Value 3</div>
   </div>
</div>

值1
价值2
价值4
价值3

这是javascript源代码

var clickLtoR  = function(n){
   _this = $('#'+n);
   $('#groupR').prepend('<div class="aaaR" id="'+n+'">'+_this.html()+'</div>');
  _this.remove();

}

var clickRtoL = function(n){
    _this = $('#'+n);
    $('#groupL').prepend('<div class="aaaL" id="'+n+'">'+_this.html()+'</div>');
    _this.remove();

}

$('.aaaL').click(function(){
    clickLtoR($(this).attr("id"));
});
$('.aaaR').click(function (){
    clickRtoL($(this).attr("id"));
});

var clickLtoR=函数（n）{
_这=$（'#'+n）；
$（'#groupR'）.prepend（''+_this.html（）+''）；
_这个。删除（）；
}
var clickRtoL=函数（n）{
_这=$（'#'+n）；
$（'#groupL'）.prepend（''+_this.html（）+''）；
_这个。删除（）；
}
$（'.aaaL'）。单击（函数（）{
单击LTOR（$（this.attr（“id”））；
});
$（'.aaaR'）。单击（函数（）{
单击RTOL（$（this.attr（“id”））；
});

例如，如果我单击“Value1”，我需要将此div移到右侧

它是有效的。但是如果我再次单击同一个元素，例如在前面的“值1”示例之后，这没有任何关联的单击事件，也不会返回到左侧列表

如何解决这个问题并绑定点击“新元素”

这里是JSFIDLE上的工作代码

你确实把这件事复杂化了。上述方法应该可以完美地工作。

试试这个

$('div.cont div div').click(function(){
  var $value = $(this);
  var $parent = $value.parent();
    if($parent.attr('id') == 'groupL'){
      $parent.next('#groupR').prepend($value);
    }else if($parent.attr('id') == 'groupR'){
      $parent.prev('#groupL').prepend($value);
    }
})

$('div.cont div div').click(function(){
  var $value = $(this);
  var $parent = $value.parent();
    if($parent.attr('id') == 'groupL'){
      $parent.next('#groupR').prepend($value);
    }else if($parent.attr('id') == 'groupR'){
      $parent.prev('#groupL').prepend($value);
    }
})