Как добавить кнопки с помощью javascript в кучу div'ов, сгенерированных Django через цикл?

Я работаю над проектом Django, в котором я сделал кучу HTML div'ов. Я хочу добавить одну кнопку на каждый div. enter image description here

На изображении выше я создал div класса card-footer с помощью Django for loop. Я хочу добавить синюю кнопку like на каждый div с помощью javascript, но на изображении видно, что она добавляется только в один div. Здесь я делюсь своим HTML шаблоном.

<div id="posts" class="card">
            <ul class="card-body">
                {% for posts in page_view %}    
                    <li class="card"> 
                         <div class="card-header bg-success">
                            <h5 class="card-title"><a class="text-light" style="text-decoration: none;" href="{% url 'profile' posts.user.id %}">{{ posts.user }}</a></h5> 
                            <h6 class="card-subtitle text-light">{{ posts.timestamp }}</h6>
                         </div>
                        <div class="card-body">

                            <h3 class="card-text">{{ posts.post }}</h3>
                        </div>
                        {% include 'network/like.html' %}
                    </li>
                {% empty %}
                    <h6>No post availabel 😔</h6>
                {% endfor %}
            </ul>     
        </div>

Вот мой network/like.html:

<div class="card-footer">
   
    <form action="{% url 'likepost' posts_id=posts.id %}" id="likeform" method="POST" style="display: inline;">
        {% csrf_token %}
        <button id = "like" class="btn btn-link" type="submit">Like</button>
    </form>
    <small id="num_of_likes">{{ posts.likepost.all.count }}</small>
    
    {% block script %} 
        <!-- <script>
            let posts_id = "{{ posts.id }}";
        </script> -->
        <script src="{% static 'network/controller.js' %}"></script>
    {% endblock %}
    <button class="btn btn-link" style="text-decoration: none;">Comment</button>
    <a href="{% url 'postpage' id=posts.id %}" class="btn btn-link" style="text-decoration: none;">View Post</a>
    {% if request.user.id is posts.user.id %}
        <a href="{% url 'editpost' id=posts.id %}" class="btn btn-link" style="text-decoration: none;">Edit</a>
       
    {% endif %}
   
</div>

В этом div класса card-footer я хочу добавить кнопку, которая содержит как в innerHTML, но она добавляется только в первый div, а не в остальные. Здесь я делюсь своим полным js кодом.

document.addEventListener("DOMContentLoaded",function(e){
    // const colon = document.createElement('div');
    // colon.setAttribute('id','colon')
    e.preventDefault()
    const likebtn = document.createElement('button');
    likebtn.setAttribute('class','btn btn-primary');
    likebtn.setAttribute('id','likebtn')
    document.querySelector('.card-footer').appendChild(likebtn);
    document.querySelector('#likebtn').innerHTML = "Like";
    // document.querySelector('.likepost').addEventListener('click', ()=> like_function('likepost'));
})



// let is_like = "{{is_like}}";
// let num_like = "{{num_like}}";

function like_function(likepost){
    document.createElement('button').innerHTML = "Love";
    fetch(`/likepost/${posts_id}`)
    // ,{
    //     method:"POST",
    //     body : JSON.stringify({
    //         "is_like" : is_like,
    //         "num_like" : num_like,
    //     })
    // })
    .then(response => response.json())
    .then(result => {
        console.log("Updated.");
        if(result.is_like){
            document.querySelector('#like').innerHTML = "Unike";
        }
        else{
            document.querySelector('#like').innerHTML = "Like";
        }
    })
    location.replace("http://127.0.0.1/")
}

// function like_function(){
//     if (document.querySelector("#like").style.color == "blue"){
//         document.querySelector("#like").style.color = "red";
//     }else{
//         document.querySelector("#like").style.color = "blue";
//     }
// }

Поскольку я новичок в javascript, я не могу понять, что идет не так! Пожалуйста, дайте мне знать, если мне нужно поделиться дополнительной информацией или куском кода.

Согласно docs тег {% include %} не может быть использован подобным образом (с переменными внутри шаблона, который вы собираетесь включить. Я уверен, что есть способы достичь желаемого с помощью JavaScript, или вы можете просто заменить тег include на весь шаблон network/like.html.

Тег include следует рассматривать как реализацию "рендеринга этот подшаблон и включить HTML", а не как "разобрать этот подшаблон и включить его содержимое, как если бы он был частью родительского". Это означает что не существует общего состояния между включаемыми шаблонами - каждый включение является полностью независимым процессом рендеринга.

Я не тестировал это, но другой возможностью было бы создать пользовательский тег шаблона include, как описано здесь.

Вернуться на верх