小弟做一个小demo遇到问题了，希望大神帮我看下怎么实现。

Question

我是想做成这个效果：点击右边框里的小×，这个元素就会到左边，如图：，点击左边框里的这个×又会回到右边，我自己写了一些代码，但是现在还存在问题，第一次是成功了，来回点就不对了。

<style>
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li{
                margin: 5px 0 5px 10px;
            }
            a{
                text-decoration: none;
            }
            #slider1,#slider2{
                width: 100px;
                border: 1px solid #333333;
                float: left;
                margin: 0 10px;
            }
            #slider1 li a,#slider2 li a{
                margin-left: 5px;
            }
            #slider1 li a:first-child,#slider2 li a:first-child{
                color: #848484;
            }
        </style>
        <div id="slider">
            <div id="slider1">
                <ul>
                    
                </ul>
            </div>
            <div id="slider2">
                <ul>
                    <li>
                        <a href="#"  class = "yuansu">元素1</a>
                        <a href="#" class = "close">x</a>
                    </li>
                    <li>
                        <a href="#"  class = "yuansu">元素2</a>
                        <a href="#" class = "close">x</a>
                    </li>
                    <li>
                        <a href="#"  class = "yuansu">元素3</a>
                        <a href="#" class = "close">x</a>
                    </li>
                    <li>
                        <a href="#"  class = "yuansu">元素4</a>
                        <a href="#" class = "close">x</a>
                    </li>
                    <li>
                        <a href="#"  class = "yuansu">元素5</a>
                        <a href="#" class = "close">x</a>
                    </li>
                    <li>
                        <a href="#"  class = "yuansu">元素6</a>
                        <a href="#" class = "close">x</a>
                    </li>
                    <li>
                        <a href="#"  class = "yuansu">元素7</a>
                        <a href="#" class = "close">x</a>
                    </li>
                    <li>
                        <a href="#"  class = "yuansu">元素8</a>
                        <a href="#" class = "close">x</a>
                    </li>
                    <li>
                        <a href="#"  class = "yuansu">元素9</a>
                        <a href="#" class = "close">x</a>
                    </li>
                </ul>
            </div>
        </div>
        <script>
        var clientH1 = $("#slider1>ul").height();
        var clientH2 = $("#slider2>ul").height();
        $("#slider1").css("height","200");
        if(clientH1>200){
            $("#slider1").css({"overflowY":"scroll","height":"200"});
        }
        if(clientH2>200){
            $("#slider2").css({"overflowY":"scroll","height":"200"});
        }else{
            $("#slider2").css("overflow","auto");
        }

        $("#slider2 li a.close").click(function(){
            $(this).parent().remove();
            var yuansu = $(this).siblings().html();
            var Ul =  $("#slider1>ul");
            Ul.append("<li><a></a><a>x</a></li>");
            Ul.children(":last").children(":first").addClass("yuansu");
            Ul.children(":last").children(":first").attr("href","#");
            Ul.children(":last").children(":first").append(yuansu);
            Ul.children(":last").children(":first").siblings().addClass("close");
            Ul.children(":last").children(":first").siblings().attr("href","#");
            var clientH1 = $("#slider1>ul").height();
            var clientH2 = $("#slider2>ul").height();
            if(clientH1>200){
                $("#slider1").css({"overflowY":"scroll","height":"200"});
            }
            if(clientH2>200){
                $("#slider2").css({"overflowY":"scroll","height":"200"});
            }else{
                $("#slider2").css("overflow","auto");
            }
            $(".close").click(function(){
                $(this).parent().remove();
            })
            
            
            $("#slider1 li a.close").click(function(){
                console.log("10");
                $(this).parent().remove();
                var yuansu = $(this).siblings().html();
                console.log(yuansu);
                var Ul =  $("#slider2>ul");
                Ul.append("<li><a></a><a>x</a></li>");
                Ul.children(":last").children(":first").addClass("yuansu");
                Ul.children(":last").children(":first").attr("href","#");
                Ul.children(":last").children(":first").append(yuansu);
                Ul.children(":last").children(":first").siblings().addClass("close");
                Ul.children(":last").children(":first").siblings().attr("href","#");
                var clientH1 = $("#slider1>ul").height();
                var clientH2 = $("#slider2>ul").height();
                if(clientH1>200){
                    $("#slider1").css({"overflowY":"scroll","height":"200"});
                }
                if(clientH2>200){
                    $("#slider2").css({"overflowY":"scroll","height":"200"});
                }else{
                    $("#slider2").css("overflow","auto");
                }
                $(".close").click(function(){
                    $(this).parent().remove();
                })
            })
        })
        
        
        </script>