Dynamic jquery dialog

Question

I am trying to use a jquery dialog to edit the contents of a web page. I want to have an edit button that takes the contents from the list below (only the name and the bios, not the images) and puts those into a jquery dialog. This dialog would have an editable text field and an editable text area for the name and bio, respectively, for entry in the list. I lmpw that the way to do this would be something like

$("#list").each(function() {
    $("#dialog-list").append($(this).text());
}

but I can't figure out how to do this when I need to add both a name and a bio for each person. It is complicated by the fact that in each li of the original list, I have an inner ul. I need this because I want to put the image next to the name and bio. So, my two questions are: is there a way to do what I described here and would there be an easier method if I had a better way of putting the image next to the text in the original list? Thanks for the help.

<ul id="list">
    <li class="person">
        <ul class="contents">
        <li>
            <img src="images/person.png">
        </li>
        <li>
            <h2>John Smith</h2>
            <hr/>
            <p>Bio</p>
        </li>
        </ul>   
    </li>
    <li class="person">
        <ul class="contents">
        <li>
            <img src="images/person.png">
        </li>
        <li>
            <h2>John Smith</h2>
            <hr/>
            <p>Bio2</p>
        </li>
        </ul>   
    </li>
</ul>

Answer 1

You may try this (DEMO)

$(function(){
    $('.edit').on('click', function(){
        var el = $(this),
            div = $('<div/>', {
                'id':'dlg',
                'class':'dlgEditor'
            }).append($('<label/>', {
                'text':'Name',
                'style':'display:block'
            })).append($('<input/>', {
                'type':'text',
                'style':'width:250px',
                'id':'name',
                'value':el.closest('li').find('h2').text()
            })).append($('<label/>', {
                'text':'Bio',
                'style':'display:block'
            }))
            .append($('<textarea/>', {
                'id':'bio',
                'style':'width:250px',
                'html':el.closest('li').find('p').text()
            })).appendTo('body')
            .dialog({
                title:'Edit',
                buttons: [
                   {
                       text: "Save",
                       click: function(){
                           var li = $('li.editing'),
                               name = $(this).find('#name').val(),
                               bio = $(this).find('#bio').val();
                           li.find('h2').text(name);
                           li.find('p').text(bio);
                       }
                   },
                   {
                       text: "Close",
                       click: function(){
                           $(this).dialog('close');
                           $('li.editing').removeClass('editing');
                       }
                   }
               ]
        });
        el.closest('li').addClass('editing');
    });
});