При нажатии на кнопку удаления удаляются только ранее добавленные теги, добавленные новые c помощью JS не удаляются

tagWrapper.querySelectorAll('.tag_container button').forEach(button => {
  button.addEventListener('click', (e) => {
    e.target.parentElement.remove();
    updateHiddenTags();
  })
});

<div class="todo-tasks__col">
  <label class="todo-tasks__label">Теги</label>
  <div class="todo-tasks__tags-wrapper">
    <div class="todo-tasks__tags-row tags">
      <?php
        $tagNames = array_map(function ($tag) {
            return $tag['name'];
        }, $toDoTags);

        foreach ($tagNames as $tagName):
      ?>
      <div class="todo-tasks__tags-tag-wrapper tag_container">
        <div class="todo-tasks__tags-tag">
          <?= $tagName ?>
        </div>
        <button class="todo-tasks__tags-tag-button" type="button">X</button>
      </div>
      <?php
        endforeach;
      ?>
    </div>
    <input type="text" class="todo-tasks__tags-input tag_input">
    <input type="text" class="tag_input-hidden" value="<?= implode(', ', $tagNames) ?>" hidden>
  </div>
</div>