JS event bubbling – How can I avoid the changing targets?

I have bound click eventListeners to an up and down vote button.

Problem: When I click on different parts of the button I get the corresponding element I clicked on and not the parent element which contains relevant information for further processing.

What I already tried: I already tried ev.stopPropagation(); but the behaviour remained the same.

Question: How can I solve this problem?

My example code

const commentVotes = document.querySelectorAll('.comment-votes');

commentVotes.forEach((row) => {
  const up = row.querySelector('.comment-vote-up');
  const down = row.querySelector('.comment-vote-down');            

  up.addEventListener('click', async (ev) => {    
    // ev.stopPropagation();
    const id = ev.target.getAttribute('data-item-id');
    console.log({"target": ev.target, "ID": id})
  });
  
  down.addEventListener('click', async (ev) => {
    // same as up
  })
});

.comment .comment-vote-box {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.spacer {
  margin-right:10px;
}

<div class="comment">
  <div class="comment-vote-box comment-votes mt-10">
    
    <div class="vote-up">
      <button class="comment-vote-up"
              data-item-id="11">
        <span class="spacer">Like</span>
        <span>0</span>
      </button>
    </div>
    
    <div class="vote-down">
      <button class="comment-vote-down"
              data-item-id="12">
        <span class="spacer">Dislike</span>
        <span>1</span>
      </button>
    </div>
    
  </div>
</div><!-- comment -->