get next child in block onclick

Question

I have this thing, which converts html code to text in textarea. The thing is when I click on html I get same code in all textarea tags. I want to click on element to get only it's code. Here is jsfiddle to see what I got so far p.s click on icon to see code on the left.

<!-- Card -->
    <aside>
        <section><textarea class="codeoutput"></textarea></section>
        <section class="codeinput">
            <figure class="card">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="18" cy="5" r="3"></circle>
                    <circle cx="6" cy="12" r="3"></circle>
                    <circle cx="18" cy="19" r="3"></circle>
                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                </svg>
                <h4>Card Simple</h4>
                <figcaption>Lorem ipsum</figcaption>
            </figure>
        </section>
    </aside>
    <!-- Card 2 -->
    <aside>
        <section><textarea class="codeoutput"></textarea></section>
        <section class="codeinput">
            <h2>Hello</h2>
        </section>
    </aside>
    <script>
        var codeinput = document.getElementsByClassName('codeinput')[0];
        var codeoutput = document.getElementsByClassName('codeoutput');
        codeinput.onclick =function () {
            for(var i = 0; i < codeoutput.length; i++) {
                codeoutput[i].innerHTML = codeinput.innerHTML;
            }
        }
    </script>

Answer 1

Get all the codeinputs and codeoutputs. Loop through the codeinputs to listen for onclick events. Edited JS code is attached.

var codeinput = document.getElementsByClassName('codeinput');
var codeoutput = document.getElementsByClassName('codeoutput');

for (var i = 0; i < codeinput.length; i++) {
  codeinput[i].onclick = function() {
    displayOutput(this);
  }
}

function displayOutput(input) {
  for (var i = 0; i < codeinput.length; i++) {
    if (codeinput[i] == input)
      codeoutput[i].innerHTML = codeinput[i].innerHTML;
  }
}

textarea {
  font-size: 0.9rem;
}

section,
body,
.card {
  display: flex;
  flex-direction: column;
}

section,
body,
.card {
  align-items: center;
  align-content: center;
}

section,
body,
.card {
  justify-content: center;
}

aside {
  display: flex;
  display: grid;
  grid-template-columns: 50vw 40vw;
}

section,
textarea {
  width: 100%;
  min-height: 60vh;
}

textarea {
  resize: none;
  white-space: pre-line;
  padding: 2rem;
  border: none;
  outline: none;
}

.card {
  margin: 0;
}

.card svg {
  width: 15vmin;
  height: 15vmin;
}

body {
  margin: 0;
  min-height: 100vh;
  width: 100vw;
  margin-top: 20vh;
}

aside {
  margin-bottom: 10vh;
}

section {
  border: thin solid #E0E0E0;
}

* {
  box-sizing: border-box;
}


/*# sourceMappingURL=output.css.map */

<!-- Card -->
<aside>
  <section><textarea class="codeoutput"></textarea></section>
  <section class="codeinput">
    <figure class="card">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<circle cx="18" cy="5" r="3"></circle>
					<circle cx="6" cy="12" r="3"></circle>
					<circle cx="18" cy="19" r="3"></circle>
					<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
					<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
				</svg>
      <h4>Card Simple</h4>
      <figcaption>Lorem ipsum</figcaption>
    </figure>
  </section>
</aside>
<!-- Card 2 -->
<aside>
  <section><textarea class="codeoutput"></textarea></section>
  <section class="codeinput">
    <h2>Hello</h2>
  </section>
</aside>