JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form-main" action="http://example.com/handleMainForm.php" method="post">
    <div class="field-row"><label for="in-A">AAA:</label> <input id="in-A" type="text" name="A" /></div>
    <div class="field-row"><input id="in-B" type="checkbox" checked="checked" name="B"/>
    <label for="in-B">BBB</label></div>
    <div><a href="#" id="lk-add">+New Item</a></div>
    <div id="inline-form-1" class="field-group">
        <button type="button" class="inline-frm-submit">Save Sub-Form</button>
    </div>
    <div class="field-row"><label for="in-C">CCC:</label> <input id="in-C" type="text" name="C" /></div>
    <div class="field-row"><label for="in-D">DDD:</label> <input id="in-D" type="text" name="D" /></div>
    <input type="submit" name="submit" value="​​Submit Entire Form" />​
</form>

CSS

#inline-form-1 {
    border: 1px solid red;
}

button.inline-frm-submit {
    display: none;
}

iframe.fff {
    border: 1px solid green;
}

JavaScript

$(document).ready(function() {
    var numItemsGenerated = 0;
    
    var addNewField = function() {
        var f = $('<div class="field-row"><label></label><input type="text" ></input></div>');
        var i = numItemsGenerated++;
        
        $('input',f)
            .attr("id", "in-item"+i)
            .attr("name", "item"+i);
            
        $('label',f)
            .attr("for", "in-item"+i)
            .text("Item #"+i+":");
        
        f.fadeTo(0, 0);
        
        $('#inline-form-1 button.inline-frm-submit').before(f);
        $('#inline-form-1 button.inline-frm-submit').add(f).fadeTo( 'slow', 1 );
    };
        
    var submitFields = function( action, method, fields, callback ) {
        var fields = $(fields);
        var f = $('<form></form>');
        
        f.attr('action', action);
        f.attr('method', method);
        f.append( fields.clone(true) );

        var iframe = $('<iframe id="tempFrame" class="fff"></iframe>');
        iframe.hide().appendTo('body');
        iframe.load(function() {
            if( callback ) callback(iframe);
            iframe.remove();
            iframe = null;
        });

        iframe.contents().find('body').append(f);
        f.submit();
    };
    
        
        
    $('#lk-add').click(function(evt){
        addNewField();
    });
    $('#inline-form-1 button.inline-frm-submit').click(function(evt){
        submitFields( 
            'http://example.com/handleSubForm.php', 
            'post', 
            $('input, select','#inline-form-1'),
            function(iframe) {                
                // do whatever you need to do (if anything).
                alert("form response received in iframe");
                
                // here's an example of copying in whatever was returned to the iframe
                var responseHtml = $(iframe).contents().find('body > *').clone();
                $('#inline-form-1 > *').not('button.inline-frm-submit').remove();
              ...