dynamic update input text value
<p>I try to make > 1. type in <code>input</code> dynamic update value in new layer ><br>
2. click layer the value show in the input and can be edit again.<br>
<a href="http://jsfiddle.net/8yZhf/3/" rel="nofollow">http://jsfiddle.net/8yZhf/3/</a>  </p>

<p>but I'm stuck in 2., if use <code>$('.input').off("focus")</code> to avoid add new layer(not update),<br>
 when finish edit and <code>focusout</code>, how to recover the <code>focus</code> just like before? or any better idea?</p>

<pre><code>var layer;
$('.input').focus(function(){
    layer = $('.input_insert').children('div').length + 1;
    $('&lt;div class='+layer+'&gt;&lt;/div&gt;').appendTo('.input_insert');// add layer

    $('.input_insert').children('div').click(function(e){
        $('.input').val($(e.target).html());
        // $('.input').off("focus");
    })
    return layer;// return layer count for keyup, focusout
})
$('.input').keyup(function(e){
    $('.'+layer).html(this.value);
})
$('.input').focusout(function(){
    $("input[class='input']").val('');
    if($('.'+layer).html() == ''){// check if empty
        $('.'+layer).remove();
    }
})
</code></pre>

<p>HTML</p>

<pre><code>&lt;input type="text" class="input"&gt;
&lt;div class="input_insert"&gt;&lt;/div&gt;// container
</code></pre>
