how can i fix this button?

document.querySelectorAll('.output').forEach(e => {
  e.addEventListener('click', function(event) {
    const x = event.target.nextElementSibling;
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  })
})

.out {
  background-color: green;
  display: none;
  border-radius: 5px;
  padding: 5px 0px 5px 5px;
  color: #fff;
}

.output:hover {
  background: black;
}

.output {
  background: #3b4fe4;
  color: #fff;
  border: 3px solid #fff;
  padding: 10px;
  width: 150px;
  text-align: center;
  cursor: pointer;
}

.out {
  background: green;
  color: #fff;
}

<div class="output">Click me</div>
<div class="out">
  This is first output
</div>
<div class="output">Click me</div>
<div class="out">
  This is second output
</div>
<div class="output">Click me</div>
<div class="out">
  This is third output
</div>
<div class="output">Click me</div>
<div class="out">
  This is Fourth output
</div>