are you using a 3rd party Ajax framework? there's some free ones out there that have provisions for that.

if you want to hand-code the heck out of your own, here's what to do:

send the information back to the server and have the save-to-db method take care of that and return the new rowID to the calling procedure.

then when you've received the new id result in the client side, create a new div with a unique ID, eg:

var memberContainer=document.createElement("div");
memberContainer.setAttribute("id","member_"+newID);//newID was returned from the server

then you add the member values you sent back to the server:
var name=document.getElementById("name");//from the input form
var email=document.getElementById("email");//from the input form

then you can get your layout happening:
var p=document.createElement("p")
p.innerHTML="name: "+name;
p.appendChild("<br/>");
p.innerHTML+="email: "+email;

then you start adding it to the parent containers:

memberContainer.appendChild(p);

and (for example) assuming your members are all stored within a parent 'members' container div:

document.getElementById("members").appendChild(memberContainer);

and so on. when you need to start removing and re-ordering the display of the members, it gets more complicated, but if you get to that point you start dealing with the parent node:

var member=document.getElementById("member_3");//or whatever the div id is to remove
var parent=member.parentElement;
parent.removeChild(member);
do NOT simply say:
member.innerHTML="";
not only do you still have those in your DOM but you'll see funny rows of space left in their place. this is important when you start using ^ and \/ keys to move them up and down a list
parent.removeChil