JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script id=field-template type=text/html>
    <p class=field data-i={{f}}>
        <label for=f-{{g}}-{{f}}>Поле {{f}}</label>
        <input type=text id=f-{{g}}-{{f}} />
        <button class=remove-field>Удалить блок</button>
    </p>
</script>

<script id=group-template type=text/html>
    <section class=group data-i="{{g}}">
        <p>
            <label for=g-{{g}}>Группа {{g}}</label>
            <input type=text id=g-{{g}} />
            <button class=add-field>Добавить еще</button>
        </p>
    </section>
</script>

<div class=container>
    <section class=group data-i="1">
        <p>
            <label for=g-1>Группа 1</label>
            <input type=text id=g-1 />
            <button class=add-field>Добавить еще</button>
        </p>
    </section>
</div>
<button class=add-group>Добавить еще</button>

JavaScript

$(document).on('click', ".add-group", function() {
        var container = $(this).siblings(".container");
        container.append(
            $("#group-template").html()
                .replace(/\{\{g\}\}/g, container.children(".group").last().data("i") + 1 || 1)
        );
    }).on('click', ".add-field", function() {
        var group = $(this).closest(".group");
        group.append(
            $("#field-template").html()
                .replace(/\{\{g\}\}/g, group.data("i"))
                .replace(/\{\{f\}\}/g, group.children(".field").last().data("i") + 1 || 1)
        );
    }).on('click', ".group .field .remove-field", function() {
        $(this).closest(".field").remove();
    });