(JS) Markdown issue in flask

I have a small problem with markdown in my flash project. I want markdown to work for all posts, currently it only works for the first post. I suspect I need to use some kind of loop, but I don’t know what to do to make it work.

Code:

{% extends "layout.html" %}
{% block content %}
<article class="media content-section">
  <div class="media-body">
    {% for post in document.posts %}
     
    <div class="article-metadata">
      
      <h3><a class="article-title" href="{{ url_for('posts.post', post_id=post.id) }}">{{ post.title }}</a></h3>
      <p class="article-content">{{ post.content }}</p>
    </div>
    {% endfor %}
  </div>
</article>
<script>
  const content_text = document.querySelector(".article-content");
  content_text.innerHTML = marked(content_text.innerHTML);
</script>
{% endblock content %}

Pic of the posts on website

Answer

querySelector returns the first element with the class. You need to use querySelectorAll to get all the elements and then use for loop to loop and apply markdown to each element.

const content_text = document.querySelectorAll(".article-content");
for (i = 0; i < content_text.length; i++){
      content_text[i].innerHTML = marked(content_text[i].innerHTML);
}