jquery - 1 つのページで複数のブートストラップ Typehead フィールドを使用していますか?

Question

先行入力要素が選択されたときに要素に ID を関連付けるように、ブートストラップの先行入力を変更しました。

function addTypeahead(element)
 {
     var labels, mapped;
     var myElement = $(element);
     console.log(myElement);
    myElement.typeahead({
        source: function (query, process){
            $.post('/edit/unassigned_list', {q: query}, function(data){
                labels = [];
                mapped = {};
                //console.log(data);
                $.each(data, function(i, item){
                    var query_label = item.name;
                    mapped[query_label] = item;
                    labels.push(query_label);
                });

                process(labels);    
            }, "JSON");
        },
        updater: function (query_label){
            var item = mapped[query_label];
            myElement.attr('person_id', item.id);
            return query_label;
        }
        });

 }

これはうまく機能しています。ただし、これを複数の要素で機能するように設定しようとすると、最初の要素で失敗することになります（誤ってグローバルスコープに漏れさせているか、ひどく間違ったことをしたためだと思います）。例を挙げましょう

#project-auto-* というラベルの付いた複数のプロジェクト要素があり、ドキュメント (ready) セクションで次のコードを実行します。

$("[id^=project-auto-]").each(function(index, element){
        var local = $(element);
        addTypeahead(element);
    });

各要素を反復処理してコンソール ログに記録すると、すべての要素が表示されます。ただし、これらのいずれかにタイプアヘッドを適用しようとすると、最初のタイプのみがタイプアヘッドを持ち (そして正しく動作します)、ループは最初の適用後に終了します。私は頭をかきむしり、さまざまなスコープで遊んでいます（したがって、すべてのスコープがネストされているのはなぜですか）。私は完全に見逃していた非常にばかげたことをしましたか?