why I am getting null for nextelementsibling | dom traversing js

when I click on title ( Title Goes Here) text. I am getting null for nextElementSibling instead of a element...

Edit

you can nest any elements inside an <a> except the following :

1. <a>
2. <button>
3. follow link

<a> and<button> both are invalid..

but I am getting null for a tag.. not for button tag.... I am looking for more clarity and valid source...

End Edit

Below Example Code

document.querySelectorAll(".viewAbstractToggleTitle").forEach(function(item) {

  item.addEventListener("click", function(e) {

    if (e.target.parentElement.classList.contains('viewAbstractToggleTitle')) {
      console.log(e.target.parentElement.nextElementSibling.nextElementSibling)
      console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling);
 console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling);

    }

  })
})

<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
  <a href="javascript:void(0)">
    <span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
      <span  style="font-weight: 600;font-size:16px;">
        Title Goes Here
      </span>
      <span> ( 1-10 page )</span>
    </span>
    <br>
    <div class="authors">
      <span><i class="fa fa-user" aria-hidden="true"></i>
        Author
      </span>
      <span><i class="fa fa-user" aria-hidden="true"></i>
        Author
      </span>
    </div>
      <button>
       button tag
      </button>
    <a class="inlineBlock" href="" download>
      <i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
    <a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
    <div class="showTabe sTab">
      <div class="tabBox">
        <div class="tab">
          <label class="label" for="tab1_">Abstract</label>
          <label class="label" for="tab2_">Graphical of Author </label>
        </div>
        <div class="box">
          <div class="content"><input id="tab1_"> Description
          </div>
          <div class="content"><input id="tab2_">
            <p>image</p>
          </div>
        </div>
      </div>
    </div>
    <br>
  </a>
</li>

from why I am getting null for nextelementsibling | dom traversing js