i have this contacts.txt (from notepad)

kate|female|kathryn bailey beckinsale|26-jul-1973|#23 underworld drive|(621) 142-7827|kate@lycans.net
jessica|female|jessica claire biel|03-mar-1982|27 texas avenue|(53)2344223|jbiel@yahoo.com
johnny|male|john christopher depp ii|09-jun-1963|711 pirate road|(773) 476-6634|jsparrow@piratebay.org


this is html and javascript:

<html>
<head>
<title>Practice</title>
<link rel="stylesheet" type="text/css" title="Preferred" href="css.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function syncText() {
var xhr = new XMLHttpRequest();
xhr.open("get", "data/contacts.txt", false);
xhr.send(null);

if (xhr.status == 200) {
var data = xhr.responseText;
var items = data.split("\n");
items.sort();
var frag = document.createDocumentFragment();

for (i=0; i<items.length; i++){
els = items[i].split("|");
li = document.createElement("li");
li.innerHTML = els[0];
frag.appendChild(li);

}
document.getElementById("list").appendChild(frag);

} else {
alert("data retrieval failed...");
}
}


</script>


</head>

<body onload="syncText()">


<div id="header">
<h1>My Contacts</h1>
<img src="data/resources/contacts.png" alt="Contacts" />
</div>

<div>
<h2>Contact List</h2>
</div>

<div id="header2" style="overflow:scroll;">
<ul id="list"></ul>
</div>

<div>
<h3>Contact Details</h3>
</div >

<div id="header3">
<form>
<table>
<tr>
<td>name:</td>
<td><input type="text" id="ajaxName" name="name"><td>
</tr>
<tr>
<td>birthday:</td>
<td><input type="text" id="ajaxBday"name="bday"><td>
</tr>
<tr>
<td>address:</td>
<td><input type="text" id="ajaxAddress"name="address"><td>
</tr>
<tr>
<td>phone: </td>
<td><input type="text" id="ajaxPhone"name="phone"><td>
</tr>
<tr>
<td>email:</td>
<td><input type="text" id="ajaxEmail"name="email"><td>
</tr>
</table>
</form>
</div>

</body>
</html>

the problem is how to be able to click the retrieved names and place it in the forms...