I am trying to get access to an HTML element that (currently) equals zero in HTML.

HTML element in a Django template:

{% for post in page_obj.object_list %}
            <div class = "individual_posts">
                <h6 id = "post_itself_{{ post.id }}" class="post_itself">{{ post.post }}</h6>
                <h6 id="likes_{{ post.id }}" class = "post_elements">{{ post.likes }}<button class="like_button">&#x1F44D;</button></h6>
{% endfor %}

The default for {{ post.likes }} is zero, but I am trying to get access to the HTML element, so that I can increase the value.

JavaScript:

document.addEventListener('DOMContentLoaded', function(){
    const likeButtons = document.querySelectorAll('.like_button');
    for (const l_button of likeButtons){
        l_button.addEventListener('click', (event) => like(event.target.id));
    }
  });

function like(id){
       let likes = document.querySelector(`#likes_${id}`);
       console.log(likes)
       console.log(likes.value);
       let likeNum = likes +=1;
}

From the first console.log, I get null. From the second console.log, I get undefined.
Does anyone know how to access the value of this id?