Moving selections of checkboxes from one div to another

I've simplified as much as I can, but might still be best to take a look at JSfiddle first. http://ift.tt/2ePm0tG I start by ticking the checkbox'European countries' on the BOTTOM box, so that Austria and Spain appear. Now, if I tick 'Europe ONLY' on the TOP box what I want is for 'Austria' and 'Spain' labels & checkboxes to move from the BOTTOM up to the TOP box. Note that if the African countries checkbox had also been ticked, then 'Egypt' and 'Nigeria' must of course remain displayed in the bottom box. I also need countries to always appear in alphabetical order, whichever box they are in.

After many failed hours on this my noobie brain's gone dead. Can anyone help?

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

<label>
<input type="checkbox" name="colorCheckbox" id="EuropeONLY" />Europe 
ONLY</label>

<div class="myTopBox">
<label id="TextID" class="TextinTopBox">My European countries are...</label>
</div>

<br>
<label>
<input type="checkbox" name="colorCheckbox" id="Europe" />European countries</label>
<label>
<input type="checkbox" name="colorCheckbox" id="Africa" />African countries</label>

<div class="myBottomBox">

<label class="myEurope">
<input type="checkbox" value="Spain" />Spain</label>
<label class="myEurope">
<input type="checkbox" value="Austria" />Austria</label>
<label class="myAfrica">
<input type="checkbox" value="Nigeria" />Nigeria</label>
<label class="myAfrica">
<input type="checkbox" value="Egypt" />Egypt</label>

</div>





$(function() {
  $('input[type="checkbox"]').click(function() {

    if ($(this).attr("id") == "EuropeONLY") {
      $(".TextinTopBox").slideToggle(200)
    }
  });
})


function sortByText(a, b) {
  return $.trim($(a).text()) > $.trim($(b).text());
}

var li = $(".myBottomBox").children("label").detach().sort(sortByText)
$(".myBottomBox").append(li)

$('input[type="checkbox"]').click(function() {
  $('.my' + $(this).attr("id")).slideToggle(200)
})




.myTopBox {
  height: 100px;
  width: 300px;
  border: 1px solid green;
}

.TextinTopBox {
  display: none;
}

.myBottomBox {
  border: 1px solid blue;
  height: 100px;
  width: 300px;
  border: 1px solid blue;
}

.myEurope {
  display: none;
}
.myAfrica {
  display: none;
}