Почему html-кнопки, динамически созданные django, не могут получить доступ к моей javascript-функции?

Мое приложение Django создает div'ы динамически. Каждый div является постом в блоге, а также у меня есть кнопка like на каждом div. Каждая кнопка автоматически превращается в "нравится", когда пользователь нажимает на нее без перезагрузки с помощью javascript. Для этого я написал функцию javascript. К сожалению, моя функция javascript работает только с последним постом на странице (Поскольку у меня есть свойство пагинации).

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



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

function like_function(){
    // document.createElement('button').innerHTML = "Love";
    // console.log("Updated!")
    fetch(`/like/${posts_id}`,{
        method:"POST",
        body : JSON.stringify({
            "is_like" : is_like,
            "num_like" : num_like,
        })
    })
    .then(response => response.json())
    .then(result => {
        if(result.is_like){
            console.log("function is liked");
            console.log(`${result.is_like} for post ${posts_id}`);
            let num_like = result.num_like;
            console.log(`Number of posts : ${num_like}`);
            document.querySelector(`#likebtn${posts_id}`).innerHTML = "Unlike";
            num_like = num_like + 1;
            console.log(`Number of posts : ${num_like}`);
            document.querySelector(`#num_of_likes_${posts_id}`).innerHTML = `${num_like} `
            // location.replace("http://127.0.0.1:8000")
        }
        else{
            console.log("function is unliked, back off!");
            console.log(`${result.is_like} for post ${posts_id}`);
            let num_like = result.num_like;
            console.log(`Number of posts : ${num_like}`);
            document.querySelector(`#likebtn${posts_id}`).innerHTML = "Like";
            num_like = num_like - 1;
            console.log(`Number of posts : ${num_like}`);
            document.querySelector(`#num_of_likes_${posts_id}`).innerHTML = `${num_like} `
            // location.replace("http://127.0.0.1:8000")
        }
    })
    
}

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

Это мой полный код javascript. Здесь я делюсь своим HTML шаблоном,

Это мой HTML шаблон. Все кнопки должны работать как это,

Только эта одна кнопка работает отлично, а другие - нет. Вот что происходит. Что мне делать? Я закончил примерно на 90%. Пожалуйста, помогите.

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