Javascript 在块onclick中获取下一个孩子

我有一个东西，它将html代码转换成文本区域中的文本。问题是，当我点击html时，我在所有textarea标记中得到相同的代码。我想点击元素，只获取它的代码。这里是我到目前为止得到的，点击图标查看左边的代码

<!-- 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>

简单卡片
乱数假文
你好
var codeinput=document.getElementsByClassName（'codeinput'）[0]；
var codeoutput=document.getElementsByClassName（'codeoutput'）；
codeinput.onclick=函数（）{
对于（var i=0；i

获取所有代码输入和代码输出。循环代码输入以侦听onclick事件。已编辑的JS代码已附加

var codeinput=document.getElementsByClassName（'codeinput'）；
var codeoutput=document.getElementsByClassName（'codeoutput'）；
对于（var i=0；i

textarea{
字体大小：0.9rem；
}
部分
身体
.卡片{
显示器：flex；
弯曲方向：立柱；
}
部分
身体
.卡片{
对齐项目：居中；
对齐内容：居中对齐；
}
部分
身体
.卡片{
证明内容：中心；
}
旁白{
显示器：flex；
显示：网格；
网格模板列：50vw 40vw；
}
部分
文本区{
宽度：100%；
最小高度：60vh；
}
文本区{
调整大小：无；
空白：行前；
填充：2rem；
边界：无；
大纲：无；
}
.卡片{
保证金：0；
}
.卡svg{
宽度：15vmin；
高度：15分钟；
}
身体{
保证金：0；
最小高度：100vh；
宽度：100vw；
边际上限：20vh；
}
旁白{
边缘底部：10vh；
}
部分{
边框：薄实线#e0；
}
* {
框大小：边框框；
}
/*#sourceMappingURL=output.css.map*/

简单卡片
乱数假文
你好