cookieに格納した配列から他のcookieのオブジェクトを取得し、要素を生成したい

Question

前提・実現したいこと

cookieに存在するcookieの名前を格納してある。
存在確認cookieは配列で格納されていて、そこからひとつ一つcookie名を取り出し、読み込む。
存在が確認されているcookieは値がオブジェクトで格納されていて、それらをそれぞれ使って要素を作り出したい。

イメージとしてはこんなかんじ
・生成したい要素をオブジェクトに格納し、cookieに入れ、そのcookie名を存在格納cookieに配列として格納する。
①存在確認cookieからforで一つ一つ読み込む
②存在確認cookieの一つの値は要素情報cookieの名前になっているため、要素情報cookie（オブジェクト）の値を取り出す。
③要素情報cookieから取り出したオブジェクトからそれぞれのキーから値を出し、それを使ってHTMLに要素を生成する。

発生している問題・エラーメッセージ

![]
画像のようにtitle1、title2、title3が一つずつ表示されずに、連なって表示される。
本当は一つの枠に一つだけのtitle1って感じで実装したい。

jqueryやjavascriptは初心者です

該当のソースコード

<div class="catalog"></div>

var gotExsistArray = $.cookie('existCookie');
        console.log(gotExsistArray)
        for (let i = 0; i < gotExsistArray.length; i++) {
            
           var notes = gotExsistArray[i];
           var noteContent = $.cookie(notes);
           console.log(noteContent);
           if(noteContent !== undefined){

            var numberData = String($.cookie(notes).number);
            var titleData = noteContent.title;
            var tagData = noteContent.tags;
            var contentData = noteContent.content;
            var makeTitle = $('<h2></h2>',{
                "class":"showedTitle"
            })
            makeTitle.html(titleData);
    
            var makeTag = $('<div></div>',{
                "class":"showedTag"
            })
            var shappedTag  = "";
            tagData.forEach(function(value){
                shappedTag = shappedTag + '<p class="Tag">' + "#" + value + '</p>'
            });
            
            
            makeTag.html(shappedTag)
    
            var makeWarraper = $('<div></div>',{
                "class":"showedWrapper",
                "id":numberData
            })
        
                $('.catalog').append(makeWarraper)
    
                $('.showedWrapper').append(makeTitle)
                $('.showedWrapper').append(makeTag)

                console.log(makeTitle)

           }else{
               console.log('エラー')
           }
            
        }

試したこと

途中で生成しようとした要素（タイトル）をコンソールに表示すると、合計で3回しかタイトルは生成していないことになっていますが、実際は一つのshowedWrapperの中にタイトル要素はそれぞれ1,1,1ではなくて3,2,1という生成をしています。
検証ツールのコンソールはこんな感じ

補足情報（FW/ツールのバージョンなど）

cookie情報
$.cookie('existCookie',
["note1","note2","note3"]
)
$.cookie('note1', {
"number":1,
"title":"title1",
"tags":["tag1","tag1","tag1"],
"content":"これはtitle1の内容です。"
}
)

使用ライブラリ
jquery3.5.1
jquery.cookie.js

動作環境
macOS Bigsur
chrome

Answer 1

        for (let i = 0; i < gotExsistArray.length; i++) {

//...

            var makeWarraper = $('<div></div>',{
                "class":"showedWrapper",
                "id":numberData
            })

                $('.catalog').append(makeWarraper)

となっているため、.showedWrapperは、最終的にgotExsistArray.lengthだけ生成されます。（例であれば3つ）
そこに、

                $('.showedWrapper').append(makeTitle)
                $('.showedWrapper').append(makeTag)

とするのですから、その時に存在するすべての.showedWrapperに（要素情報cookieから作り出した）コンテンツのコピーが追加されます。（例のtitle3時点ならば3つ）

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

.append() | jQuery API Documentation

---

解決方法ですが、$('.showedWrapper')に追加すると想定しない結果になるので、そうではなく、生成した要素にappend()メソッドを使えばいいかと思います。

Comments

[NK0920]

なるほど！ありがとうございます！解決致しました。

[Lhankor_Mhy]

お役に立てたようで何よりです。

Answer 2

$.cookie('existCookie') = ["note1","note2","note3"]

ちょっと何をしたいのかわかりません
$.cookieへの値のセットは

$.cookie('existCookie',str);

という処理になります。
またクッキーには文字列しかセットできないので配列をセットするなら

$.cookie('existCookie',JSON.stringify(["note1","note2","note3"]));

Comments

[NK0920]

ああ、ごめんなさい、わかりやすいように、格納していることを示したかったのですが、わかりづらかったですね。仰る通り、$.cookie('existCookie',["note1","note2","note3"]) です。