I'd really appreciate recommendations on the most efficient way to approach this.

I'm building a simple javascript application which displays a list of records and allows the user to edit a record by clicking an "Edit" link in the records row. The user also can click the "Add" link to pop open a dialog allowing them to add a new record.

Here's a working prototype of this: http://jsfiddle.net/FfRcG/

You'll note if you click "Edit" a dialog pops up with some canned values. And, if you click "Add", a dialog pops up with empty values.

I need help on how to approach two problems

1. I believe we need to pass our index to our edit dialog and reference the values within the JSON, but I am unsure how to pass the index when the user clicks edit.

2. It bothers me that the Edit and Add div contents are so similiar (Edit just pre populates the values). I feel like there is a more efficient way of doing this but am at a loss.

Here is my code for reference

$(document).ready( function(){

// Our JSON (This would actually be coming from an AJAX database call)
people = {
    "COLUMNS":["DATEMODIFIED", "NAME","AGE"],
    "DATA":[
    ["9/6/2012", "Person 1","32"],
    ["9/5/2012","Person 2","23"]
    ]
} 


// Here we loop over our JSON and build our HTML (Will refactor to use templating eventually)
members = people.DATA;  

var newcontent = '<table width=50%><tr><td>date</td><td>name</td><td>age</td><td></td></tr>';

for(var i=0;i<members.length;i++)
{
    newcontent+= '<tr id="member'+i+'"><td>' + members[i][0] + '</td>';
    newcontent+= '<td>' + members[i][1] + '</td>';
    newcontent+= '<td>' + members[i][2] + '</td>';
    newcontent+= '<td><a href="#" class="edit" id=edit'+i+'>Edit</a></td><td>';
}
newcontent += "</table>";
$("#result").html(newcontent);

// Bind a dialog to the edit link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#edit").dialog("open");

    // Not sure the most efficient way to change our dialog field values
    $("#name").val() // ???

    alert($());
    return false;
});

// Bind a dialog to the add link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#add").dialog("open");

    return false;
});

// Bind a dialog to our edit DIV
$("#edit").dialog();

// Bind a dialog to our add DIV
$("#add").dialog(); 

});

And here's the HTML

<h1>People</h1>

<a href="#" class="add">Add a new person</a>

<!-- Where results show up -->
<div id="result"></div>

<!-- 
Here's our edit DIV - I am not clear as to the best way to pass the index in our JSON so that we can reference positions in our array to pre populate the input values.
-->
<div id="edit">
<form>
    <p>Name:<br/><input type="text" id="name" value="foo"></p> 
    <p>Age:<br/><input type="text" id="age" value="33"></p>
    <input type="submit" value="Save" id="submitEdit">
</form>
</div>

<!-- 
Here's our add DIV - This layout is so similiar to our edit dialog. What is the
most efficient way to handle a situation like this?
-->
<div id="add">
<form>
    <p>Name:<br/><input type="text" id="name"></p>
    <p>Age:<br/><input type="text" id="age"></p>
    <input type="submit" value="Save" id="submitEdit">
</form>
</div>