Создание кнопки для обновления в постах django с помощью javascript fetch

У меня есть html, который отображает посты пользователя. В то же время, модель постов доступна через fetch (javascript). Я хочу создать кнопку для обновления содержимого постов, которые django показывает, но с помощью fetch. Проблема в том, что когда кнопка создается в моем коде, вместо того, чтобы создать кнопку для каждого поста, она создает 5 кнопок обновления в первом посте, и это логично, потому что это id, который я ему даю. Как я могу добавить кнопку в каждый пост, который django показывает с помощью javascript? Примечание: проект является тестовым для реального проекта.enter image description here

Я хочу добавить кнопку обновления с javascritp в django posts для обновления поля

Мой html: 

<div id="formulario" class="form-style" style="border: 5px solid rgb(255, 170, 0);">
        <h1>User's Posts</h1>
        {% for post in object_list %}
        <div id="posts-div" style="border: 5px solid red;">
            <h3 id="user">{{post.usuario}} -  User with id: {{post.id}}</h3>
            <h3>{{post.contenido}} - {{post.id}}</h3>
        </div>
        {% endfor %}
        <h1>Agregar</h1>
        <form method="post">{% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="Save">
        </form>

    </div>

Мой views.py


class PostsViewSet (viewsets.ModelViewSet):
    queryset = Posts.objects.all()
    serializer_class = PostsSerializer


class PostView(CreateView, ListView):
    model = Posts
    fields = ['contenido','edad','usuario']
    template_name = 'api_app/posts.html'
    success_url ='.'

Мой serializer.py:

from rest_framework import serializers
from .models import Posts



class PostsSerializer(serializers.ModelSerializer):
    class Meta:
        model = Posts
        fields = ['usuario', 'edad', 'contenido']

Мой javascript:

addEventListener('DOMContentLoaded', (event) => {     
        fetch('/api/posts')
        .then(response => response.json())
        .then(data => {
            data.forEach(post => {

                console.log(post.usuario)

                post_div = document.getElementById('posts-div'); 
                update_post = document.createElement('button');
                update_post.innerHTML = 'Update';
                post_div.appendChild(update_post);
                
            });
            
                
        });
      
        });

Я знаю, что api не определяет метод, но сначала я попытался создать кнопку в каждом посте

Я решил проблему таким образом. Пока (еще не тестировал) все работает. Разница в том, что querySelectorAll переменная i и i++

data.forEach(post => {

) 
            console.log(post.usuario);
            
            post_div = document.querySelectorAll('.post-div-class')[i]; 
            update_post = document.createElement('button');
            update_post.innerHTML = 'Update';
            post_div.appendChild(update_post);
            ++i;
            console.log(i);
            
        });
Вернуться на верх