JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
    <div>
        <input type="submit" value="Submit" id="g" />
        <input type="button" id="addCap" value="Add a Cap"> 
    </div>
    <fieldset name="cap1" id="cap1">
        <legend>Cap1</legend>
        <input type="text" name="cap1" id="cap1" value="name cap1"/>
        <input type="button" class="addParag" onclick="addParag(this)" value="Add a Paragraph"> 
    </fieldset>
    

</form>
   json: <div id="result"></div>

JavaScript

var capitoli = 1;
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
    $('form').submit(function() {
        var r=$('#result').text(JSON.stringify($('fieldset input').serializeObject()));
        console.log(r);
        return false;
    });
});

function addParag(elem) {
    var htmlcode = '<fieldset id="parag">' + '<legend>Paragraph</legend>' + '<input type="text" name="parag" id="parag" value="name paragraph"/>' + '<input type="button" id="removeParagrafo" value="Remove Paragraph"></fieldset>';

    $(elem).parent().append(htmlcode);
}


$(function(){
    
$('#addCap').click(function() {
        capitoli = capitoli + 1;
        var htmlcode = '<fieldset id="capitolo'+capitoli+'">' + '<legend>Cap' + capitoli + '</legend>' + '<input type="text" id="cap'+capitoli+'" name="cap'+capitoli+'"  value="valcap2"/>' + '<input type="button" class="addParag" value="Add Paragraph" onclick="addParag(this)"></fieldset>';

        $("#form").append(htmlcode);

    });
});