jQuery - Copying text field shows wrong value as does "inspect element" (work-around?)
===

So I have this `div` with a field (`input[type=text]`) inside it and I'm creating a copy of this div's contents and displaying the copy to the user to edit it's value. When they update the copy's value it's then submitted which changes the value of the original. 

The problem is that when I delete the copy and make a new copy from the hidden div again the text appearing in the field of the new copy is the original text (when the page loaded) and not the new text that it was updated to. The original field shows the new text inside it, *but* when I inspect element on it, the value attribute shows the old text.

In other words everything is correct except the text showing up in the copies and the value attribute of the original. 

So I'm wondering if I'm doing something wrong or if there's some kind of work-around.

Here's a code example:

    <div style="display:none">
        <input type="text" value="test" />
        <a>Submit</a>
    </div>
    <button class="get">Get value</button>
    <button class="show">Show hidden one</button>
    <button class="copy">Copy hidden one</button>​
    $('button.copy').click(function(){
        $('<br><span>'+$('div').html()+'</span>').appendTo('body');
    });
    
    $('a').live('click',function(){
        $('div input').val($('span input').val());
        $('span').remove();
    });
    
    $('button.get').click(function(){
        alert($('div input').val());
    });
    
    $('button.show').click(function(){
        $('div').show();
    });

[​My jsFiddle][1]


  [1]: http://jsfiddle.net/25Huz/1/