JavaScript fetch likes not showing up in the social Post in Django

Question

I am making social website in Django. I made a backend which works properly. The problem is with JavaScript (with which I'm less familiar than python, so sorry about that). When page is loaded, I fetch API which tells me if post is liked or not. Than I should add the corresponding picture (red or gray heart). Hearts are not showing up at all at page load. Note: back end code works as intended. I can visit fetch link and data is correct. The code:

js file

document.addEventListener('DOMContentLoaded', function() {
    var allButtons = document.querySelector('#all').childElementCount;
    console.log(allButtons)
    var content = document.querySelectorAll('.name');
    var button = document.querySelectorAll('#heart');
    var edit = document.querySelectorAll('#edit');
    var subedit = document.querySelectorAll('#subedit');
    var editdiv = document.querySelectorAll('.editdiv');
    var post = document.querySelectorAll('.post');
    var textarea = document.querySelectorAll('.textarea');
    var editbutton=document.querySelectorAll('input[name="edit"]')
    var csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    var likenum = document.querySelectorAll('#likenum')
    var page=document.querySelector("#page").innerHTML
    for (i = 0; i < allButtons; i++) {
    function listen(i) {
        var heart = new Image();
        heart.id = "main";
    var requestPOST = new Request(
        `/Post/${content[i].id}`,
        {
            method: 'POST',
            headers: {'X-CSRFToken': csrftoken},
            mode: 'same-origin'
        }
    );
    var requestGET = new Request(
        `/Post/${content[i].id}`,
        {
            method: 'GET',
        }
    );
        edit[i].addEventListener('click', () => {
            editdiv[i].style.display = 'block';
            editbutton[i].className="btn btn-info"
            post[i].style.display = 'none';
            subedit[i].addEventListener('click', () => {
            fetch(`/edit/${content[i].id}`,
            {
                method: 'POST',
                headers: {'X-CSRFToken': csrftoken},
                mode: 'same-origin',
                body: JSON.stringify({
                post: textarea[i].value,
                page: page             
                })}).then(() => {
                    editdiv[i].style.display = 'none';
                    post[i].style.display = 'block';
                })})})  
    fetch(requestGET).then((response) => response.json()).then((data) => {
        if (data[0]=="like") {
            heart.src = "/static/network/like.png"
        }
        else {
            heart.src = "/static/network/nolike.png"
        }
        likenum[i].innerHTML=data[1]
        button[i].appendChild(heart);
    })
    button[i].addEventListener('click', () =>
    fetch(requestPOST).then((response) => response.json()).then((data) => {
        if (data[0]=="like") {
            heart.src = "/static/network/like.png"
        }
        else {
            heart.src = "/static/network/nolike.png"
        }
        likenum[i].innerHTML=data[1]
        button[i].appendChild(heart);
        heart.style.animationPlayState  = 'running';
        }
))}listen(i)}})

index.html

{% extends "network/layout.html" %}

{% block body %}
<div style="text-align:center">
    <form method="POST">{% csrf_token %}
        {{ newpost }}
        <div><input type="submit" id="submit" value="Post" class="btn btn-primary"></div>
    </form>
    </div>
    <br>
    {% include "network/posts.html" %}
{% endblock %}

posts.html base template:

{% if user.is_authenticated %}
<div id = "all">
{% for post in posts %}
<div>
{% if post.user != request.user %}
<input type="hidden" name="edit" id ="edit"></input>
{% else %}
<input type="button" class="btn btn-secondary" value="edit" name="edit" id ="edit"></input>
{% endif %}
<div class="post">
<a class="username" id="{{ post.user.id }}" href="{% url 'other_profile' post.user.id %}">{{ post.user.username }}</a>
<div class="name" id = "{{ post.id }}"><div>{{ post.date }}</div><div style="font-size: 25px;">{{ post.post }}</div></div>
<div id ="heart"><span id="likenum"></span></div>
</div>
<div class = "editdiv">
    <form method = "POST">{% csrf_token %}
        <textarea name="content" class="textarea" placeholder="edit">{{ post.post }}</textarea>
        <div><button class="btn btn-primary" id="subedit">Edit</button></div>
    </form>
</div>
<br>
{% endfor %}
</div>
</div>
{% endif %}