JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html> 
<head>         
    <meta charset="utf-8">
    <style>a { font: 12px Arial; color: #ac9095; }</style>
</head>
</body> 
    <form>
        <label>Nome</label> <input type="text" name="nome"><br />
        <label>Cognome</label> <input type="text" name="cognome">
        <button type="button" id="salva">Salva</button>
    </form>        

    <textarea rows="10" cols="60"></textarea><br />
    <button type="button" id="esporta">Esporta dati</button>
    <a href="" style="display: none">Scarica Dati</a>
</body>
</html>

JavaScript

var f = $('form'), a = $('a'),
    i = $('input'), t = $('textarea');
       
$('#salva').bind('click', function(evt) {
    var o = {}, v = t.val();
    
    a.hide();
    i.each(function() { o[this.name] = $(this).val(); });
    if (v === '') {
        t.val("[\n " + JSON.stringify(o) + " \n]")         
    }
    else {
        t.val(v.substr(0, v.length - 3));
        t.val(t.val() + ",\n " + JSON.stringify(o) +  " \n]")  
    }
});

$('#esporta').bind('click', function(evt) {
    a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show();
        
});