Using Django filter inside Javascript

Question

I am beginner at django, I stuck at using Django filter inside javascript. I was trying to implement Load More data using ajax. Everything works fine but i am not able to append new data to the html container. In my home view which is extends to base.html. i have the following html content-

{% block content %}

{% for post in posts %}

<article class="media card border-secondary" style="margin: 1rem 0;">
  <div class="card-body media-body">
    <h5 class="card-title">{{post.post_title}}</h5>
    <h6 id="reading-time" class="card-subtitle mb-2 text-muted">{{post.post_content | readtime }}</h6>
    <p class="card-text">{{post.post_content | truncatewords:50 |markdown|striptags }}</p>
    <!--  | safe    -->
    <a href="{% url 'article-page' post.post_id post.post_title|slugify %}" class="stretched-link">Continue
      Reading</a>

  </div>

</article>

{% endfor %}

<button type="button" id="loadmorebtn" class="btn btn-outline-primary mx-auto d-block btn-lg">Load More</button>

{% endblock content %}

I am using some built-in django filter and one custom filter. On Load More button clicked i have some ajax code which runs fine and return the data-

<script type="text/javascript">



  $(document).ready(function () {
    var offset = 5
    const loadBtn = $('#loadmorebtn');

    loadBtn.click(function (e) {
      e.stopImmediatePropagation();
      $(this).prop('disabled', true);       // Disable the button
      $(this).html('<span class="spinner-grow spinner-grow-lg align-middle" role="status" aria-hidden="true"></span>   Loading...');           // Change button text

      $.ajax({
        url: "{% url  'load-more-posts' %}",
        type: "GET",
        data: { 'offset': offset },
        dataType: 'JSON',
        success: function (data) {
          if (data.status == 1) {
            offset += data.posts.length;
            loadBtn.prop('disabled', false); // Re-enable the button
            loadBtn.text('Load More');

            data.posts.forEach(el => {
              $('#container').append(

                <article class="media card border-secondary" style="margin: 1rem 0;">
                  <div class="card-body media-body">
                    <h5 class="card-title">{{ el.title }}</h5>
                    <h6 id="reading-time" class="card-subtitle mb-2 text-muted">{{ post.post_content | readtime }}</h6>
                    <p class="card-text">{{ post.post_content | truncatewords:50 |markdown|striptags }}</p>
    <!--  | safe    -->
                    <a href="{% url 'article-page' post.post_id post.post_title|slugify %}" class="stretched-link">Continue
                      Reading</a>

                  </div>

                </article>
              )
            });
          }
        }
      })
    });
  })

but, my problem is how can i handle this data if just add {{${el.content} | readtime. it throwing an error. is there any way to handle this problem. so i can use django filer

or, I should leave this ajax and moved to pagination where more data is loaded on 2nd page. or, I have to create javascript function for every django filter to use.

I am using Django version 5.0.2