Добавленные флажки div, вызывающие проблемы с подсветкой цвета

Question

Мой код начинается с добавления флажков стран от 2 деления до 3 деления. Этот 3-й (или "удерживающий" раздел) затем добавляет его содержимое вперед и назад между рядом других разделов, как и когда требуется. Каким-то образом это сумело испортить цвет подсветки флажков. Флажки "Год" должны быть белыми на синем фоне, а флажки "Страна" - красным на желтом фоне. Я часами пытался понять, почему цвета не подчиняются их 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>