Issue Sorting Checkbox Labels according to state (checked at buttom, checked at top)

I'm working on creating a grocery-list-like checklist with custom checkboxes. When checking off an item I using Javascript to move the item to the bottom of the list and strike it. This all works as it should, but I would also like to place it at the buttom of the list of unchecked should it be unchecked. This is were I can't seem to get it right. It seems that I keep appending the node to the opposite end (counting from the bottom up) instead of from the top down no matter how I try to insert it. My javascript function looks like this

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]
    }
}

The last line list.insertBefore(par,list.childNodes[totItems.length]); is the line that deals with moving the node. I've tried list.childNodes[totItems.length] and list.childNodes[bottom], but both ways don't work for me. Here's a sample of the html that comprises the list

<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>

Below are a few screenshots of how it works as of right now.

The numbers are the order in which they are clicked

---

The result after the two items have been clicked

Each click sends the item to the bottom of the list.

---

What happens when unchecking Bananas

The item is not put at the bottom of the list of unchecked. The arrow shows where it should've went (right above Strawberries). Also, if only one item is checked, if that one item is unchecked it should stay at the bottom of the list.

---

How can I make this work as I would like? What am I doing wrong? Here is the Liveweave for a working example of the code I currently have.

Note: I would like to avoid jQuery as the application I'm using this for can only do javascript.