附加复选框div导致颜色突出显示问题

Question

我的代码首先将国家/地区复选框从2个div添加到第3个div。第3个（或'hold'div。），然后在需要时在许多其他div之间来回追加其内容。不知怎的，这已成功搞乱了复选框的突出显示颜色。 “年份”复选框在蓝色背景上应为白色，而“国家/地区”复选框在黄色背景上应为红色。我花了好几个小时试图找出为什么颜色不遵守他们的CSS代码。有人可以帮忙吗？ http://jsfiddle.net/o1Ljyf31/

 $('#CountryList1 label, #CountryList2 label').appendTo($('.CountryRHWrapperClass'))
    $('.CountryRHWrapperClass').appendTo($('.CountryListBoxClass_ws'))
    $('.CountryListBoxClass_ws').show()


    jQuery.fn.multiselect= function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);

            // Highlight checkboxes that the user selects
            checkbox.change(function() {
                if (checkbox.prop("checked"))
                    checkbox.parent().addClass("CountryListBoxClass_ws-on YearListBoxClass_ws-on");
                else
                    checkbox.parent().removeClass("CountryListBoxClass_ws-on YearListBoxClass_ws-on");
  });
  });
});
};
$(".CountryListBoxClass_ws, .YearListBoxClass_ws").multiselect();

#ContainerForYearListBoxID_ws {
  height: 40px;
  border: solid 1px red;
}
.CountryListBoxClass_ws label {
  display:block;
  background: lightgrey;
  height: 40px;
}
.YearListBoxClass_ws-on {
  color:white;
  background-color:blue;
}
.CountryListBoxClass_ws-on {
  color: red;
  background-color:yellow;
} 
.myEuropeCountries {
  display: none;
  float:left;  
}
.mySAMCountries {
  display: none;
  float:left;  
}
.myAfricaMECountries {
  display: none;
  float:left;  
}
.myEastAsiaCountries {
  display: none;
  float:left;  
}

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

    <div id="ContainerForYearListBoxID_ws">
    <div id="YearListBoxID_ws" class="YearListBoxClass_ws">
    <label><input type="checkbox" name="checkbox" value="2015" />2015</label>
    <label><input type="checkbox" name="checkbox" value="2014" />2014</label>
    <label><input type="checkbox" name="checkbox" value="2013" />2013</label>
    </div>
    </div>
    <br>

    <!-- Move countries from storage to listbox -->
    <div id="CountryListBoxID_ws" class="CountryListBoxClass_ws"></div>

    <!-- Country storage -->
    <div class="CountryRHWrapperClass"></div>

    <div id="CountryList1">
    <label class="myEuropeCountries"><input type="checkbox" value="Austria"  />Austria</label>
    <label class="mySAMCountries"><input type="checkbox" value="Brazil" />Brazil</label>
    </div>

    <div id="CountryList2">
    <label class="myAfricaMECountries"><input type="checkbox" value="Algeria" />Algeria</label>
    <label class="myEastAsiaCountries"><input type="checkbox" value="Japan" />Japan</label>
    </div>