たとえば、aaa222が右に100px動いていて、bbbをクリックすると、その動いていたaaa222を元の0pxのポジションに戻して、bbb222を右に100px動かしたいです。
ccc222も同じように動いてほしいです。
つまり、右側に動かすのは１つだけで、ほかの２つはクリックされたら、元の0pxに戻る、というプログラムにしたいのですが、どうしたらよいのでしょうか？

<script>
$(function(){
 var duration=300;
 var $a2=$("#aaa222");
 $("#aaa").on("click",function(){
  $a2.toggleClass("goA2");
  if($a2.hasClass("goA2")){
   $a2.stop(true).animate({
    left:100},
    duration);
  }else{
   $a2.stop(true).animate({
    left:0},
    duration);
  }
 })
 
});

$(function(){
 var duration=300;
 var $b2=$("#bbb222");
 $("#bbb").on("click",function(){
  $b2.toggleClass("goB2");
  if($b2.hasClass("goB2")){
   $b2.stop(true).animate({
    left:100},
    duration);
  }else{
   $b2.stop(true).animate({
    left:0},
    duration);
  }
 })
 
});

$(function(){
 var duration=300;
 var $c2=$("#ccc222");
 $("#ccc").on("click",function(){
  $c2.toggleClass("goC2");
  if($c2.hasClass("goC2")){
   $c2.stop(true).animate({
    left:100},
    duration);
  }else{
   $c2.stop(true).animate({
    left:0},
    duration);
  }
 })
 
});

</script>
<style>
#aaa{
 display:block;
 position:relative;
 width:500px;
 height:50px;
 background:rgba(0,0,255,1);
 }
#aaa222{
 display:block;
 position:relative;
 top:20px;
 width:50px;
 height:10px;
 background:rgba(51,255,153,1);
 
 }
#bbb{
 display:block;
 position:relative;
 width:500px;
 height:50px;
 background:rgba(0,255,255,1);
}
#bbb222{
 display:block;
 position:relative;
 top:20px;
 width:50px;
 height:10px;
 background:rgba(153,51,102,1);
 
 }
#ccc{
 display:block;
 position:relative;
 width:500px;
 height:50px;
 background:rgba(50,100,100,1);
 }
#ccc222{
 display:block;
 position:relative;
 top:20px;
 width:50px;
 height:10px;
 background:rgba(153,0,0,1);
 
 }



</style>
<body>

<div id="aaa"><div id="aaa222"></div></div>
<div id="bbb"><div id="bbb222"></div></div>
<div id="ccc"><div id="ccc222"></div></div>
</body>