Как отправить переменную шаблона в цикле в HTML для JavaScript?

Question

У меня есть переменная класса Post модели в html, и я хочу добавить возможность добавления комментариев к любым сообщениям.Так что у меня есть функция js для нажатия кнопки, чтобы добавить комментарий, и я хочу отправить тот post_id, какой пользователь хочет добавить комментарий для него, но из-за того, что этот тег находится в цикле, он всегда отправляет один и тот же post_id !!!Что я могу сделать ??

html:

{% extends "base.html" %}
   {% block body_block %}
       <h2>Profile:</h2>
       <h2>Posts:</h2>
       {% for temp_user_posts in user_posts %}
           <div class="profile_page">
               <h3><b>{{ temp_user_posts.post }}</b></h3>
               <p>{{ temp_user_posts.post_time }}</p>

           </div>
               <label for="user-comment">comment:</label>
               <input id="user-comment" type="text" name="{{ temp_user_posts.pk 
   }}">
               <button onclick="add_comment_button();">add comment</button>

       {% endfor %}

   {% endblock %}

js:

function add_comment_button() {
    alert($('#user-comment').attr("name"));
    $.ajax({
        type: "GET",
        url: '/user_add_comment',
        data: {
            "comment_text": $('#user-comment').val(),
            "post_pk": $('#user-comment').attr("name"),
        },
        dataType: "json",
        success: function (data) {
            location.href = data["url"]
        },
        failure: function () {
            alert('There is a problem!!!');
        }
    });
}

просмотр:

def user_add_comment(request):
    post_pk = request.GET.get('post_pk', None)
    post = PostModel.objects.get(pk=post_pk)
    comment = CommentPostModel()
    comment.post = post
    user_info = UserProfileInfo.objects.filter(user=request.user)
    user_info2 = object()
    for temp_user_info in user_info:
        user_info2 = temp_user_info
        break
    comment.profile_user = user_info2
    comment.text = request.GET.get('post_text', None)
    comment.save()
    data = {
        "url":"/profile_page",
    }
    return JsonResponse(data)

модель:

class UserProfileInfo(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    bio = models.TextField(max_length=100, blank=True, default="Bio")
    profile_pic = models.ImageField(upload_to='profile_users', blank=True)

    def __str__(self):
        return self.user.username


class PostModel(models.Model):
    username = models.CharField(max_length=20, unique=False, verbose_name="Username", default="")
    image = models.ImageField(upload_to='user_images', blank=True)
    post = models.TextField(max_length=100, blank=True)
    post_time = models.DateTimeField(default=datetime.now, blank=True)

    def set_post_time(self):
        self.post_time = datetime.now()
        self.save()

    def __str__(self):
        return self.username

Answer 1

Попробуйте вставить запись pk во входной идентификатор и в качестве аргумента функции кнопки:

<input id="user-comment-{{ temp_user_posts.pk }}" type="text" name="{{ temp_user_posts.pk }}">
<button onclick="add_comment_button({{ temp_user_posts.pk }});">add 
comment</button>

Тогда вы сможете отправить определенный контент в запросе GET:

function add_comment_button(postPk) {
$.ajax({
    type: "GET",
    url: '/user_add_comment',
    data: {
        "comment_text": $('#user-comment-' + postPk).val(),
        "post_pk": postPk,
    },
    dataType: "json",
    success: function (data) {
        location.href = data["url"]
    },
    failure: function () {
        alert('There is a problem!!!');
    }
});
}