点击左侧列表添加到右侧

html结构

左侧用户名单
<div class="layui-tab-item layui-show">
     <ul class="userp-user-list" id="myTable">
           <li><div><a href="javascript:void(0)">用户1</a></div></li>
     </ul>
</div>

右侧已选择用户
<div class="layui-col-sm4 layui-col-md4">
      <div class="page-body">
            <!-- 面包屑 -->
            <div class="layui-breadcrumb content-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                  <a><cite>已选择用户</cite></a>
            </div>
            <div><ul class="userp-user-this"></ul></div>
       </div>
</div>

js代码

// 选择用户点击X删除所选用户
        $(document).on('click', '.userp-user-this i', function () {
            $(this).closest('.userp-user-this li').remove()
        })
        // 点击左侧列表列 输出内容到右侧列表
        // 给左侧的列表加上唯一标识 利用唯一标识来防止append重复添加的事件
        var list_index;
        $(document).on('click', '.userp-user-list li', function () {
            is_value = $(this).html();
            list_index = $(this).index();
            if($(".userp-user-this #"+ list_index).length == 0){
            $(".userp-user-this").append("<li id='" + list_index + "'>" + is_value +'<a href="javascript:void(0)"><i class="layui-icon layui-icon-close"></i></a>' +
                '</li>');
            return false;
            }
        })
        // 点击x清空input的内容
        $(document).on('click', '.userp-close', function () {
            $(".search-input input").val('');
        })
        // 模糊搜索用户名
        $(document).on('click', '#search', function () {
            var input = document.getElementById("myInput");
            var filter = input.value.toUpperCase();
            var table = document.getElementById("myTable");
            var li = table.getElementsByTagName("li");
            // 循环表格每一行，查找匹配项
            for (var i = 0; i < li.length; i++) {
                div = li[i].getElementsByTagName("div")[0];
                if (div) {
                    if (div.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        li[i].style.display = "";
                    } else {
                        li[i].style.display = "none";
                    }
                }
            }
        })