Moving div between two locations in DOM

Question

I need to move the contents of a div to another location on click, then allow a user to click another button to move it back.

The use case is expanding a map from a sidebar (to become full width), then optionally return the map to the sidebar.

Due to the complexity of the code inside the div, I am trying to relocate the contents of the div rather than duplicate it and show/hide.

I have a pen set up, which successfully moves the contents to the 2nd location, but I'm not able to toggle it back to its original location.

$('.location-1 .toggle').on('click', function () { 
  $(".moveable").appendTo(".location-2");
});

$('.location-2 .toggle').on('click', function () { 
  $(".moveable").appendTo(".location-1");
});

.location-1,
.location-2 {
  padding: 1em;
  margin: 1em;
}

.location-1 {
  border: solid 1px red;
}

.location-2 {
  border: solid 1px blue;
}

.button {
  background: #eee;
  border: solid 1px #ccc;
  cursor: pointer;
  display: inline-flex;
  padding: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="location-1">
  <div class="moveable">
    <p>This content needs to move between two divs</p>
    <div class="toggle button">move it</div>
  </div>
</div>

<div class="location-2"></div>