Ошибка с удалением JS?

Question

[iiideb]

Здравствуйте, такая проблема: есть функция для скрытия блока div

function deleteAlert() {
  var x = document.getElementById("alert");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Он при нажатии делает элемент div с параметром display: none;
в таком html документе:

<div class="container mt-5">
  @if($errors->any())
    @foreach($errors->all() as $error)
      <div class="alert alert-danger alert-dismissible fade show" id="alert" role="alert">
      {{ $error }}
      <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="deleteAlert()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    @endforeach
  @endif
  @if(session('success'))
  <div class="alert alert-success alert-dismissible fade show" id="alert" role="alert">
  {{ session('success') }}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="deleteAlert()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
  @endif

@yield('content')
</div>

Если выводится 1 блок(это блок ошибок), то все хорошо работает, но если 2 и более, то при нажатии на кнопку закрытия закрывается первый блок, после при нажатии на вторую, первый блок появляется, а второй не исчезает.
Я в js ничего не знаю и не понимаю, знаю только то, что в строках выше ошибка

Answer 1

[Александр]

<button type="button" class="close" aria-label="Close">...</button>

const alerts = document.querySelectorAll('.alert');

for (const alert of alerts) {
  const closeButton = alert.querySelector('.close');

  if (closeButton !== null) {
    closeButton.addEventListener('click', event => {
      event.preventDefault();

      alert.style.setProperty('display', 'none');
    });
  }
}