根据州发布排序复选框标签（在buttom检查，未选中顶部）

Question

我正在创建一个带有自定义复选框的杂货清单清单。在检查项目时，我使用Javascript将项目移动到列表的底部，然后 strike 它。这一切都可以正常工作，但如果不加以检查，我还想把它放在未选中列表的底部。这是我似乎无法做到的。似乎我不断将节点附加到另一端（从下往上计数），而不是从上到下，无论我如何插入它。我的javascript函数看起来像这样

function got(cbId) {
    var cbox = document.getElementById(cbId);
    var lbl = cbox.nextElementSibling;
    var par = cbox.parentNode;
    var list = document.getElementById('list');

    var newlbl = document.createElement('LABEL');
    if(cbox.checked){
        par.insertBefore(newlbl,lbl);
        newlbl.outerHTML = '<label for="'+cbId+'" class="name got"><strike>'+lbl.innerHTML+'</strike></label>';
        par.removeChild(lbl);
        list.removeChild(par);
        list.appendChild(par);
    }else{
        var tmp = lbl.innerHTML;
        tmp = tmp.replace(/<strike>/g,'');
        newlbl.innerHTML = tmp.replace(/<\/strike>/g,'');
        par.insertBefore(newlbl,lbl);
        newlbl.outerHTML = '<label for="'+cbId+'" class="name">'+newlbl.innerHTML+'</label>';
        par.removeChild(lbl);
        list.removeChild(par);
        var totItems = list.getElementsByClassName('name');
        var gotItems = list.getElementsByClassName('name got');
        var bottom = totItems.length - gotItems.length;
        list.insertBefore(par,list.childNodes[bottom]);
      console.log(bottom);
      //list.childNodes[lastGot]
    }
}

最后一行list.insertBefore(par,list.childNodes[totItems.length]);是处理移动节点的行。我已尝试list.childNodes[totItems.length]和list.childNodes[bottom]，但这两种方式都不适合我。这是包含列表的html示例

<div id="list">
  <div class="item">
    <input id="item1" type="checkbox" onclick="got(this.id);" class="box">
    <label for="item1" class="name">Apples</label>
  </div>
  <div class="item">
    <input id="item2" type="checkbox" onclick="got(this.id);" class="box" >
    <label for="item2" class="name">Bananas</label>
  </div>
  <div class="item">
    <input id="item3" type="checkbox" onclick="got(this.id);" class="box" >
    <label for="item3" class="name">Stawberries</label>
  </div>
</div>

以下是目前工作原理的几个截图。

数字是点击它们的顺序

<小时/>

单击两个项目后的结果

每次单击都会将项目发送到列表底部。

<小时/>

取消选中香蕉时会发生什么

该项目未放在未选中列表的底部。箭头显示它应该去的地方（正好在草莓上方）。此外，如果仅选中一个项目，如果未选中该项目，则应保留在列表的底部。

<小时/> 我怎样才能按照自己的意愿做这项工作？我究竟做错了什么？ 以下是我目前拥有的代码的工作示例Liveweave和JSFiddle。

注意：我想避免使用jQuery，因为我使用它的应用程序只能执行javascript。