在过去的3个月左右的时间里，我一直在自学编程，我在尝试制作一个页面时遇到了一些问题。我认为我的问题有点基本，所以我有点不好意思问。任何指导都会非常有用。谢谢！
我有一个接受食谱的页面。每个食谱都有一组数量的说明或配料。接受新食谱的表单默认显示3个字段来添加说明和3个字段来添加配料。
我想实现一个按钮，允许用户添加额外的成分或额外的步骤的指示。
这是新视图文件在指令段中的样子。对于配料来说，它几乎是一样的，只是给予或取一些东西。

<div class="mb-3">
     <label class="form-label" for="instructions" id="labelInstructions">instructions</label>
        
     <% for(let i = 0; i<3; i++){ %>
     <div class="input-group" id="instructionGroup">
     <div class="input-group-prepend">
       <span class="input-group-text">Step <%= i+1 %> </span>
     </div>
      <textarea class="form-control" aria-label=<%=`Instructions-Step-${i +1}`%> name=<%=`recipe[instructions][${i}][body]` %> id="instructions"></textarea>
</div>
<div class="valid-feedback">Looks good!</div>
     
     <% } %>

我尝试将onclick函数添加到

<button onclick="addInstruction()">+</button>

我需要模板上的文件，该文件试图添加适量的div并修改类和inertext等。
但我被困在这里了：

function addInstruction() {
    console.log('clicked')
    const label = document.getElementById('labelInstructions')
    const tempDiv = document.createElement('div')
    label.insertAdjacentElement("afterend", tempDiv)
}

在控制台中，它显示它正在被点击，但它没有添加我创建的div。我知道其余的逻辑还没有出现，我只是想看看我是否可以先看到div，但我什么也看不到。
然后我开始想，给循环限制加1会更容易些，但是那个循环是写在EJS标签里面的，我想知道是否有一种方法可以通过onclick事件来修改它，或者是否有一种更好的方法来做这件事，我一直在想。
我对这个很陌生，任何帮助都很感激。谢谢！