Moving checked items in a list with a loop

Question

I have two unordered lists and the lists items have checkboxes inside of them. I want to move all of the check items on one side to the other at once. Currently it is only moving them one at a time, or occasionaly two at a time, and giving me errors. I think there is an issue with my loops?

http://jsfiddle.net/XJ82y/

<form action="" method="get" name="formName">

<div class="list" id="select1_wrapper">

<ul id="select1">
<li><label>
  <input type="checkbox" value="checkbox" id="CheckboxGroup1_0" class="movethis" />
  <span>Lime</span></label>        
  </li>
</ul>
</div>

 <div class="middle_column_options" style="float:left; width: 60px; padding-top:10px;">
 <a href="#" id="add" onclick="javascript:moveRight(); return false;">Move items to the right</a>
 <hr />
 <a href="#" id="remove" onclick="javascript:moveLeft(); return false;">Move items to the left</a>
 </div>

<div class="list" id="select2_wrapper">

<ul id="select2">
<li><label>
  <input type="checkbox" value="checkbox" id="CheckboxGroup2_0" class="movethis" />
  <span>Banana</span></label>
      </li>
<li><label> 
  <input type="checkbox" value="checkbox" id="CheckboxGroup2_1" class="movethis" />
  <span>Pear</span></label>
      </li>
</ul>
</div>
</form>

javascript:

//move function
function moveLeft () {
    var selectlist = document.getElementById('select2');
    var hom = selectlist.getElementsByTagName("li");
    var homs = selectlist.getElementsByTagName("li").length; //count the number of list items and set as homs
    for (var i=0;i<homs;i++){
      var subcheck = hom[i].getElementsByTagName('input')[0];

      if (subcheck.checked) {
        document.getElementById('select1').appendChild(hom[i]);
    } 


    };
};

function moveRight () {
    var selectlist = document.getElementById('select1');
    var hom = selectlist.getElementsByTagName("li");
    var homs = selectlist.getElementsByTagName("li").length; //count the number of list items and set as homs
    for (var i=0;i<homs;i++){
      var subcheck = hom[i].getElementsByTagName('input')[0];

      if (subcheck.checked) {
        document.getElementById('select2').appendChild(hom[i]);
    } 


    };
};

No jquery answers please! Looking for a javascript-only solution.

Answer 1

As Evan said, you are modifying the list as you iterate over it. If you build the list seperately, and then iterate over that (since it won't shrink when you move an element) it will work. A quick example that:

//move function
function moveLeft () {
    var selectlist = document.getElementById('select2');
    var hom = selectlist.getElementsByTagName("li");
    var homs = selectlist.getElementsByTagName("li").length;
    var toMove = [];
    //count the number of list items and set as homs
    for (var i=0;i<homs;i++){
        var subcheck = hom[i].getElementsByTagName('input')[0];
    if (subcheck.checked) {
           toMove.push(hom[i]);     
        }
    };
    for (var i = 0; i < toMove.length; i++) {
      document.getElementById('select1').appendChild(toMove[i]);
    }
};