javascript - 動的リストを反復する Dexie.js

Question

indexDB ラッパーであるdexie.jsを使用しています。とにかく、ユーザーのローカル ストレージから呼び出される配列があり、関数は DB 内のすべてのリスト項目を反復処理して表示することになっています。ただし、my をクリックすると、Butane名前の最新の入力のみが表示されます。

注: いくつかの値を追加してローカル ストレージを確認すると、データベース全体を表示できます。

私の JsFiddle: https://jsfiddle.net/enzp3zws/1/

私のhtml：

<ul id="mane"></ul>

私のjs：

var db = new Dexie("TestDatabase");
db.version(1).stores({
    friends: '++id, name, age'
});
var collection = db.friends;
var placement = document.getElementById('rainman');
var jacement = document.getElementById('rainboy');
var stacement = document.getElementById('mane');
var listed = document.createElement('li');

function addrain(){
    collection.each(function(friend){
    var element = [friend.name];
    for (var i = 0; i < element.length; i++){ 
    listed.textContent = element[i];
    document.getElementById('mane').appendChild(listed);
    //alert(element); <-- this call alerts all names in database.  
    }   
});
}

これらの変数名の一部がランダムであることをお許しください。もはや睡眠とは何かを知りません。