左侧点击右侧联动且可排序编辑保存选中元素参数

<div>
    <div>
        <div class="materMain" id="js_materA">
            <ul>
                <li>
                    <a href="javascript:">
                        <label>
                            <input type="hidden" name="左1" data-num="1">
                            <input type="checkbox" name="c_id" value="90">左1</label>
                    </a>
                </li>
                <li class="active">
                    <a href="javascript:">
                        <label>
                            <input type="hidden" name="左2" data-num="3" value="1">
                            <input type="checkbox" name="c_id" value="19">左2
                        </label>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <label>
                            <input type="hidden" name="左1" data-num="1">
                            <input type="checkbox" name="c_id" value="90">左1</label>
                    </a>
                </li>
                <li class="active">
                    <a href="javascript:">
                        <label>
                            <input type="hidden" name="左2" data-num="3" value="1">
                            <input type="checkbox" name="c_id" value="19">左2
                        </label>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <label>
                            <input type="hidden" name="左1" data-num="1">
                            <input type="checkbox" name="c_id" value="90">左1</label>
                    </a>
                </li>
                <li class="active">
                    <a href="javascript:">
                        <label>
                            <input type="hidden" name="左2" data-num="3" value="1">
                            <input type="checkbox" name="c_id" value="19">左2
                        </label>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div>
        <div  id="js_materADesc">
            <ul class="editMater">
                <li data-name="左1" data-id="1">
                    <div>
                        <a href="javascript:" class="icon-plus"></a>
                        <span>左1x
                            <b>3</b>
                        </span>
                        <a href="javascript:" class="icon-minus"></a>
                    </div>
                </li>
                <li data-name="左2" data-id="1">
                    <div>
                        <a href="javascript:" class="icon-plus"></a>
                        <span>左2x
                            <b>6</b>
                        </span>
                        <a href="javascript:" class="icon-minus"></a>
                    </div>
                </li>
               
            </ul>
        </div>
    </div>
</div>

JQ部分

$("#js_materA ul li input[type=checkbox]").on("click",function(e){
                    //  e.stopPropagation();
                     var iNow = $(this).parents("li");
                     iNow.toggleClass("active");
                     iNow.find("input[type=hidden]").val(iNow.index());
                     if($(this).parents("li").hasClass("active")){
                        var iNumber = 1;
                        var txt = $(this).parents("li.active").find("input[type=hidden]").attr("name");
                        var oId = $(this).parents("li.active").find("input[type=hidden]").val();
                        var tmpHtml='<li data-name="'+txt+'" data-id="'+oId+'"><div><a href="javascript:" class="icon-plus"></a><span>'+txt+'x<b>'+iNumber+'</b></span><a href="javascript:" class="icon-minus"></a></div></li>';   
                        //结构
                       editBtn($(tmpHtml));
                         //排序
                   
                        //
                    }else if(!$(this).parents("li").hasClass("active")){
                        var iNow = $(this).parents("li").index();
                        var txt = $(this).parents("li").find("input[type=hidden]").attr("name");
                        var arrDel = $("#js_materADesc ul li");
                        for(var i=0;i<arrDel.length;i++){
                               var temp = arrDel[i].dataset.name;  
                               if(txt==temp){
                                   $("#js_materADesc ul li").eq(i).remove();
                               }
                        }
                    }
                })

 function editBtn(template){
                template.appendTo("#js_materADesc ul").on("click",'a',function(){
                    var temp = 1;
                    var o = Number($(this).siblings("span").find("b").text());
                    if($(this).hasClass("icon-plus")){
                            o+=1;
                    } else {
                        if(o==1){
                            o=1;
                        } else {
                            o-=1;
                        }
                    }
                    $(this).siblings("span").find("b").text(o);
                   $("#js_materA ul li").eq($(this).parents("li")[0].dataset.id).find("input[type=hidden]").attr("data-num",o);
                });
                 
                $("#js_materADesc ul li").sort(sortLi).appendTo($("#js_materADesc ul"));
            }

 //排序
        function sortLi(a, b){
            return ($(b).data('id')) < ($(a).data('id')) ? 1 : -1;    //升序排列
        }

说明：

给input添加点击事件（注：label的for为空时要把for去掉否则影响input选中事件）

1：checkbox选中时父集添加class="active",通过父集是否有active的class对右边显示内容进行编辑

2：选中时，把name,id都赋值给右边动态生成的li的自定义data-*属性中，方便排序以及删除

3：动态生成里的每个a点击事件特意单独写，用到了template.appendTo(父集).on(事件，元素，fn)

4：点击事件都是a的原因，判断元素class编辑功能，增/减

template. appendTo( "#js_materADesc ul"). on( "click", 'a',fn)

//编辑的数量动态赋值给左边对应元素的input[type="hidden"],方便后台取值

$( "#js_materA ul li"). eq( $( this). parents( "li")[ 0]. dataset. id). find( "input[type=hidden]"). attr( "data-num", o);

无论元素选择先后顺序，都会升序排列显示，一一对应

//排序

function sortLi( a, b){

return ( $( b). data( 'id')) < ( $( a). data( 'id')) ? 1 : - 1; //升序排列

}

（编辑页面时要先初始化数据，动态添加右侧数据）

data-*属性使用技巧

获取数据  dataset.名字 

 已经有data-*属性的input，设置数据的时候用input.attr("data-名字",新数据)   获取数据 input.attr("data-名字")