jQuery Forum

Hi there , bumped with another doubt so here it goes i have the structure like below

1. <div class="ui-widget">
                                       <div class="ui-widget-header">
                                           Sales<span class="ui-icon ui-icon-comment"></span><span class="ui-icon ui-icon-trash"></span>
                                       </div>
                                       <span class="ui-widget-content">visual basic</span>
                                   </div>
   

Now here is the functionality all i wanted, when user clicks the Comment icon the Span with ui-widget-content class turn into textbox with the value. OnMouseOut i want the textbox to be removed and the text typed inside the textbox to be content of the span.
Just reminding you that I have about 10-12 div's of that sort and they can also be added dynamically.
Here is the code i have come up with only thing is it is not working

1. $('.ui-icon-comment').click(function(){
   var prevTxt = $(this).parent().siblings().text();
   $(this).parent().siblings().html("<input type='text' style='width:120px' value='"+prevTxt+"' onmouseout='"+update(this)+"'>");
   })
   
   

only thing i don't know is how to get the textbox value and then update the information.
Note: Sorry!! i don't want to use any plugins as this functionality is a 1 page requirement.