Moving checkboxes back and forth between parent and modal

I have a list of country checkboxes on the parent screen. I also provide a modal (div) which contains those same countries and provides the User with more country options.

Any checkbox changes made in the parent listbox need to carry over to the modal, and any changes made in the modal must be reflected back in the parent listbox when the modal is closed.

In a drastically cut-down fiddle you can see that my jquery doesn't append the checkboxes to the modal (...and I'll probably need help getting them back to the parent too!) . I have searched previous posts but nothing works so far. Can anyone help?

http://ift.tt/2fkZysF

$('#openCountryRegionModal').click(function() {
  var targetBox = $(this).prop("checked") ? '#ModalContainerID' : '.CountryRHWrapperClass';
  $('.myWorldCountries').appendTo($(targetBox));
});

#ModalCountryButtonID {
  color: red;
  background: white;
  text-decoration: none;
  border: 1px solid blue;
  margin-top: 20px;
}
/* Modal code  */

#ModalContainerID {
  height: 40px;
  background: yellow;
}
.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  height: 100px;
  position: relative;
  margin-left: calc(8vw);
  margin-right: calc(8vw);
  margin-top: 20px;
  padding: 15px 10px 10px 10px;
  border-radius: 5px;
  background: #fff;
}
.close {
  color: orange;
  line-height: 25px;
  position: absolute;
  right: 5px;
  text-align: center;
  top: 5px;
  width: 24px;
  text-decoration: none;
}

<script src="http://ift.tt/1oMJErh"></script>
<!-- Store Countries -->
<div class=CountryRHWrapperClass>
  <label class="myWorldCountries">
    <input type="checkbox" value="Spain" />Spain</label>
  <label class="myWorldCountries">
    <input type="checkbox" value="Austria" />Austria</label>
  <label class="myWorldCountries">
    <input type="checkbox" value="Belgium" />Belgium</label>
</div>
<br>
<br>
<!-- Create Link button to open modal ------------------------------------>
<div class="ModalButtonRegionCountryDivClass">
  <a href="#openCountryRegionModal" id="ModalCountryButtonID">Open modal</a>
</div>
<!-- Trigger modal ---------------------------------->
<div id="openCountryRegionModal" class="modalDialog">
  <div> <a href="#close" title="Close" class="close">X</a>
    <!-- Append countries to modal here ------------------------>
    <div id="ModalContainerID" class="ModalContainerClass"></div>
  </div>
</div>