Paused on exception TypeError: document.getElementById(...) is null

Well Here I am creating commenting system. It works fine if there is at least one comment already but if there is no comment and try to create one than it shows me an error Paused on exception TypeError: document.getElementById(...) is null . I don't know how can i fix it.

html

  <div id="post_id" post-id="{{post.pk}}" post-slug="{{post.slug}}">    
        {% if node.level < 3 %} 
        <button class='btn btn-success' onclick="myFunction({{node.id}})">Reply</button>
        {% endif %}
        </div> 

jquery,ajax funtion

$(document).on('click', '#newcomment, #newcommentinner', function (e) {
    e.preventDefault();

    var button = $(this).attr("value");
    var post_id = document.getElementById('post_id').getAttribute('post-id'); #Here is an error appearing.
    var post_slug = document.getElementById('post_id').getAttribute('post-slug');
    console.log(post_id,'postid')
    var placement = "commentform"
    if (button == "newcommentform") {
      var placement = "newcommentform"
    }
 
    $.ajax({
      type: 'POST',
      url: '{% url "posts:addcomment" %}',
      data: $("#" + button).serialize() + "&post_id="+post_id + "&post_slug="+post_slug,
      cache: false,
      error: console.log('post_id' + post_id),
      success: function (json) {
        console.log(json)

        $('<div id="" class="my-2 p-2" style="border: 1px solid grey"> \
          <div class="d-flex justify-content-between">By ' + json['user'] + '<div></div>Posted: Just now!</div> \
          <div>' + json['result2'] + '</div> \
          <hr> \
          </div>').insertBefore('#' + placement);

        $('.commentform').trigger("reset");
        formExit()
      },
      error: function (xhr, errmsg, err) {
      }
    });
  })

if more code is require than tell me in comment session. i will update my question with that information.