Find specific element that follows another specific element

In CSS, if you want to target a specific element that immediately follows another specific element, you would use the next-sibling combinator:

<style>
/* any 'p' that immediately follows 'div' will be red */
div + p { color: red; }
</style>

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

But how to make it in JavaScript? I tried closest, but I’m not surprised it doesn’t work. If I understand its description on MDN, it is intended to work differently.

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<script>
  'use strict';

  window.onload = function() {
    for (const input of document.querySelectorAll('.input')) {
      document.querySelector(input.closest('body > .output')).innerHTML = 'input.innerHTML';
    }
  }
</script>

How to make it work?