Transfer SVG code DIV-input-DIV

I'm just curious - is it possible to send by SVG image code in the following way?

<original div with inline SVG> -> Input field -> <final DIV>

I want to use following code:

<a href="#" id="copy-1">Copy-1</a>

<div id="source-1">

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>    

</div>

<input name="dynamichidden-637" value="" id="pole" />

<br />
<a href="#" id="copy-2">Copy-2</a>

<div id="source-2"></div>

and Jquery:

jQuery( document ).ready(function( $ ) {
            $('#copy-1').click(function() {
                var value = $('#source-1').html();
                var input = $('#pole');
                input.val('')
                input.val(input.val() + value);
                return false;
            });
    $('#copy-2').click(function() {
        $('#pole').appendTo('#source-2');
        return false;
            });
});

So my question is - is it possible to achieve it in that way? or using somehow other solution which will allow me to transfer svg code from one page to another without storing the data in Database? This is JSfiddle: http://jsfiddle.net/v2br8/16/

Solution

You just need to create the copy using the value of the input:

var value = $('#pole').val();
var copy = $(value);
copy.appendTo('#source-2');

or simply:

$($('#pole').val()).appendTo('#source-2');

Transfer SVG code DIV-input-DIV

DEMO