django and javascript question show and hide edit form from list of selected queries

I have the following in my index

 <div id="posts">
{% for post in posts %}
<div class="card">
    <div class="card-body">
        <h5 class="card-title"><a href="{% url 'profile' post.user.username %}">{{post.user.username}}</a> wrote:</h5>
        {%if post.user_id == user.id %}
        <div class="cardn">
            <a href="#" onclick="editpost()">Edit</a>

            <div class="card-body" id="card-body" style="display: none">
                <form action="editpost/{{post.id}} " method="post">
                    {% csrf_token %}
        
                    <div class="form-group">
                        <label for="post_text" class="h4">Edit Post</label><br>
        <textarea name="post_text">{{post.text}}</textarea>            </div>
                    <button type="submit" class="btn btn-primary btn-sm">Edit</button>
                </form>
            </div>
        </div>
        {%endif%}
        <p class="card-text" id="post_text_{{post.id}}"> {{ post.text }}</p>
   
        <p class="card-text"><small class="text-muted">on: {{post.post_date}}</small></p>
        <p class="card-text">
            <div data-id="{{post.id}}"
                class="card-link {% if post.current_like > 0 %} fas {%else%} far {% endif %} fa-heart">&nbsp<small
                    class="text-muted">{{post.like_set.count}}</small>
                    </div>
        </p>
    </div>
</div>
{% empty %}
<h2>No posts</h2>
{% endfor %}

what i would like to reach is to show only the edit form for the clicked edit button using javascript

here is my view

 def editpost(request, id):
post = Post.objects.get(
            id=id)
if request.method == "POST":
        text = request.POST.get("post_text")
        Post.objects.filter(
            id=id, user_id=request.session['_auth_user_id']).update(text=text)
        return HttpResponseRedirect(reverse("index"))
else:
    return render(request, "network/editpost.html",  {
    'post': post
    })

my JS thats not working
document.addEventListener(“click”, editPost);

function editPost(event){ // Listener sees triggering event
  const clickedThing = event.target; // Event has useful properties
  const userCard = clickedThing.closest(".cardn");
  if(userCard){ // Makes sure button has a `card` ancestor before proceeding

    // Now, with the correct card identified, we can collect values from it
    document.querySelector(`#card-body`).style.display = "block";
      // ...etc, as described above
  }
}

thanks in advance