javascript - 实现两个box交互后列表排序问题？-Soal Jawab Rangkaian PHP Cina

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
    <style type="text/css">
        p{
            border:1px solid #bbb;
            width: 200px;
            margin-bottom: 30px;
            text-align: center;
        }
        p{
            background: #ddd;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h4>收藏(点击移除收藏)</h4>
    <p id="box1">
       <p class="yes">IIIII</p>
       <p class="yes">MKMKMK</p>
   </p>
   <h4>未收藏(点击添加收藏)</h4>
   <p id="box2">
    <p class="no">AAAA</p>
    <p class="no">CCCC</p>
    <p class="no">KKKK</p>
    <p class="no">pppp</p>
    <p class="no">8888</p>
    <p class="no">gggg</p>
    <p class="no">6666</p>
    <p class="no">989898</p>
    <p class="no">RRRRuuu</p>
    <p class="no">kkkk</p>
    <p class="no">ZXZXZX</p>
</p>
<script>
    !function(){
        $("body").on("click",".no",function(){
            var a=$(this).addClass("yes").removeClass("no");
            $("#box1").append(a);
        });
        $("body").on("click",".yes",function(){
            var a=$(this).addClass("no").removeClass("yes");
            $("#box2").append(a);
        });

    }()
</script>
</body>
</html>

一个可以收藏和移除收藏的功能，怎么实现在两个box之间多次来回重复交换之后列表的排序还是最初原来的顺序？？实现这种按原顺序排序有哪些好的实现思路？？谢谢！