Building my first Javascript Application (jQuery), struggling on something
<p>I'd really appreciate recommendations on the most efficient way to approach this.</p>

<p>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.</p>

<p>Here's a working prototype of this: <a href="http://jsfiddle.net/FfRcG/" rel="nofollow">http://jsfiddle.net/FfRcG/</a></p>

<p>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.</p>

<p>I need help on how to approach two problems</p>

<ol>
<li><p>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.</p></li>
<li><p>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. </p></li>
</ol>

<p>Here is my code for reference</p>

<pre><code>$(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 = '&lt;table width=50%&gt;&lt;tr&gt;&lt;td&gt;date&lt;/td&gt;&lt;td&gt;name&lt;/td&gt;&lt;td&gt;age&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;';

for(var i=0;i&lt;members.length;i++)
{
    newcontent+= '&lt;tr id="member'+i+'"&gt;&lt;td&gt;' + members[i][0] + '&lt;/td&gt;';
    newcontent+= '&lt;td&gt;' + members[i][1] + '&lt;/td&gt;';
    newcontent+= '&lt;td&gt;' + members[i][2] + '&lt;/td&gt;';
    newcontent+= '&lt;td&gt;&lt;a href="#" class="edit" id=edit'+i+'&gt;Edit&lt;/a&gt;&lt;/td&gt;&lt;td&gt;';
}
newcontent += "&lt;/table&gt;";
$("#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(); 

});
</code></pre>

<p>And here's the HTML</p>

<pre><code>&lt;h1&gt;People&lt;/h1&gt;

&lt;a href="#" class="add"&gt;Add a new person&lt;/a&gt;

&lt;!-- Where results show up --&gt;
&lt;div id="result"&gt;&lt;/div&gt;

&lt;!-- 
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.
--&gt;
&lt;div id="edit"&gt;
&lt;form&gt;
    &lt;p&gt;Name:&lt;br/&gt;&lt;input type="text" id="name" value="foo"&gt;&lt;/p&gt; 
    &lt;p&gt;Age:&lt;br/&gt;&lt;input type="text" id="age" value="33"&gt;&lt;/p&gt;
    &lt;input type="submit" value="Save" id="submitEdit"&gt;
&lt;/form&gt;
&lt;/div&gt;

&lt;!-- 
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?
--&gt;
&lt;div id="add"&gt;
&lt;form&gt;
    &lt;p&gt;Name:&lt;br/&gt;&lt;input type="text" id="name"&gt;&lt;/p&gt;
    &lt;p&gt;Age:&lt;br/&gt;&lt;input type="text" id="age"&gt;&lt;/p&gt;
    &lt;input type="submit" value="Save" id="submitEdit"&gt;
&lt;/form&gt;
&lt;/div&gt;
</code></pre>
