JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <span id="sholder"></span>
    <br />
    <input type="button" value="Add Section" class="addsection" />
</div>


<div id="section_template" class="template">
    <div class="section">
        <span class="taholder"></span>
        <br />
        <input type="button" value="Add Textarea" class="addtextarea" />
    </div>
</div>

CSS

div.template {
    display: none;
}

div.section {
    border: 1px solid black;
}

div.section textarea {
    display: block;
}

JavaScript

$(function() {
    $("input.addsection").click(CreateSection);
    
    $(document).on("click", "input.addtextarea", function() {
        var section = $(this).closest("div.section");
        AddTextarea(section);
    });
});

function CreateSection() {
    var section = $("#section_template div.section").clone();
    var holder = $("#container span#sholder");
    var sectionCount = holder.find("div.section").length;
    
    section.attr("id", "section" + (sectionCount + 1));
    AddTextarea(section);
    holder.append(section);
}

function AddTextarea(section) {
    var sectionID = section.attr("id");
    var holder = section.find("span.taholder");
    var taCount = holder.find("textarea").length;
    
    var ta = $(document.createElement("textarea"));
    var taID = section.attr("id") + "_textarea" + (taCount + 1);
    ta.attr("id", taID);
    ta.val("ID: " + taID);
    
    holder.append(ta);
}