JSFiddle - React, Tailwind, and code Playground

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>

CSS

body{font-family: verdana; font-size:12px;}
 h1{font-size:22px;}

JavaScript

$(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"],
        ["9/12/2012","Person 3","30"],
        ["9/6/2012","Person 4","30"],
        ]
    } 


    // 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");

        // I figure I need to update the inputs when the user clicks but am not sure
        // of the best method for doing this.
        $("#name").val() // ???
        
        return false;
    });

    // Bind a dialog to the add link
    $(".add").click( function(){ 
        
        // Trigger our dialog to open
        $("#add").dialog("open");

        return false;
    });

    // Bind a dialog to our edit DIV
    $("#edit").dialog({
        autoOpen: false,
        closeText: 'Close',
        draggable: false,
        modal: true
    });

    // Bind a dialog to our add DIV
    $("#add").dialog({
        autoOpen: false,
        closeText: 'Close',
        draggable: false,
        modal: true
    });    

});