Actualmente estoy trabajando en un proyecto 4 para CS50w - Red. Una de las tareas es agregar un botón de edición de publicaciones (para editar las publicaciones que creó el usuario que inició sesión (solo el propietario)), que hace esto asíncrono. Dado que para almacenar publicaciones estoy usando Django Models, estoy usando Django (y sus capacidades de plantilla) para mostrar todas las publicaciones a los usuarios también, y un botón de edición (si el usuario también es el creador de la publicación). Estoy mostrando todas las publicaciones en un div. Esto significa que el botón para editar también es parte de este div... lo que significa que solo puedo darle una sola clase o id para hacer referencia, pero no sé cómo distinguirlos y cómo saber cuál. (desde qué publicación) se hace clic para que pueda editar esa publicación y no la primera en la que aparece el JS en DOM ... De todos modos, aquí está el código:

HTML en Django:

 {% for post in posts %} <div class="post"> <a href="{% url 'users' post.user.username %}">{{ post.user }}</a> <p>{{ post.content }}</p> <p>{{ post.created }}</p> {% if user.is_authenticated and user == post.user %} <button class="edit_post_button">Edit Post</button> {% endif %} </div> <div class="edit_post" style="display: none;"> <a href="{% url 'users' post.user.username %}">{{ post.user }}</a> <textarea rows=3 cols=20>{{ post.content }}</textarea> <p>{{ post.created }}</p> <button class="save_edit_post_button">Save</button> </div> {% endfor %}

y aquí está el pequeño JS que escribí que no funciona (estoy empezando a aprenderlo y me gustaría terminar este proyecto con vainilla JS):

 document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.edit_post_button').forEach(edit_post_button => { edit_post_button.addEventListener('click', edit_post); }) }); function edit_post(event) { document.querySelector('.post').style.display = 'none'; document.querySelector('edit_post').style.display = 'block'; }