jQuery append うまくいかない

Question

前提・実現したいこと

ajaxでコメントした後画像のように表示したい。

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

しかし、このようになってしまう。

該当のソースコード

<div style="padding-bottom: 50px;" id="comment_ajax">
    <div class="shadow-sm rounded-pill" style="margin: 15px; padding: 15px;">
        <diV class="flex-column"  style="margin-left: 20px;" >
            <div id="comment_user_img">
<!--                プロフィール画像追加-->
                <div id="comment_user_username">
<!--                    ユーザー名追加-->
                </div>
            </div>
            <div class="text-break" id="comment_info" >
<!--                コメント内容を追加-->
            </div>
        </div>
    </div>
</div>
<script>
ajaxの処理後、返り値がresponseに入っている。
    $('#comment_info').append('<p>' + response.comment + '</p>');
    $('#comment_user_username').append('<p>' + response.username + '<p>');                
    $('#comment_user_img').append('<img src="' + response.avatar_url + '">');
</script>

実現したい方の写真のhtmlです。

<div style="padding-bottom: 50px;">
        {% for comment in comments %}
        <div class="shadow-sm rounded-pill" style="margin: 15px; padding: 15px;">
            <diV class="flex-column"  style="margin-left: 20px;" >
                <div>
                    <img class="img-fluid rounded-circle" style="height: 30px; width: 30px; object-fit: cover;"
                         src="/media/{{ comment.owner.avatar }}">
                    {{ comment.owner.username }}
                </div>
                <div class="text-break" >
                        {{ comment.comment }}
                </div>
            </diV>
        </div>
        {% endfor %}
    </div>

Answer 1

全体の構造が分からないので、Hintくらいにしかならないかもしれませんが
for ～ in と言う事は同期/非同期に関わらず複数の結果が有って
$('#comment_info')ならIDですから同一IDのエレメント全部に追加しています
for ～ in実行位置からの相対的な配置になるのではないでしょうか？

的外れならごめんなさい

Comments

[shuring]

同一のidに入れているため、思うようにいかなんですね、
ありがとうございます。