Preserving formatting when copying xmp tag to clipboard using javascript

Question

I'm trying to create an editable text box for people to tweak and then copy to their clipboard with one button. I'm currently doing it as an xmp, but when they click copy it breaks the formatting - so this:

I am editable!

I am second line!

becomes this:

I am editable!I am a second line!

Any ideas how I can make it preserve line breaks?

Here's the code I'm using:

<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
</script>


<xmp class="editable" id="myInput" contentEditable=true style="border: 1px inset #aaa;height: 100px;">I am editable!
I am a second line!</xmp>


<button onclick="copyToClipboard($(this).prev())" style=“margin-bottom:10px”  class="copycode">
Copy message
</button>

Thanks!