jquery - jQuery div パズル

Question

サイトに 3 つの列があります。各列には、情報を含む div があります (列に約 20 ～ 30 個。ID には left-a..z、center-a..z、right-a..z という名前が付いています)。重要ではない div を中央と右の列から非表示にし、左の列からいくつかの div を中央または右の列に配置する必要があります。

私はこの問題を次のように解決します。

フィドル

$(function(){
    $("#wrapper > #right1").fadeOut(1000).attr('id','right1-chg');
    $("#wrapper > #left-name").fadeOut(1000).attr('id','right1');
    $("#wrapper > #right1").fadeIn(1000);

    $("#wrapper > #right2").fadeOut(1000).attr('id','right2-chg');;
    $("#wrapper > #left-surname").attr('id','right2');
});

$(function(){
    $(".click").click(function(){
    $("#wrapper > #right1").attr('id','left-name');
    $("#wrapper > #right1-chg").attr('id','right1').fadeIn(3000);
    $("#wrapper > #left-name").fadeIn(1000);

    $("#wrapper > #right2").attr('id','left-surname');
    $("#wrapper > #right2-chg").attr('id','right2').fadeIn(3000);
    $("#wrapper > #left-surname").fadeIn(1000);
    $(".click").hide();
});

});

しかし：

1. それは最善の解決策ではないようです。より読みやすいコードを書くにはどうすればよいでしょうか。
2. 別のdivを移動した後、下のdivを空きスペースに移動する方法は? この問題は #left-phone で確認できます (私のコードと同じだと思いますが、多くのコード行が生成されます)。