JSFiddle - React, Tailwind, and code Playground

HTML

<form id="f">
    <fieldset id="fs">
        <legend>Fieldset</legend>
        <input type="text" id="i" value="test" name="i">
    </fieldset>
        <input type="text" id="i2" value="test2" name="i2">
        <button id="go">go</button>
</form>
When using serializeArray on the form:
<div id="output-form" class="output"></div>
When using serializeArray on the fieldset:
<div id="output-fieldset" class="output"></div>

CSS

.output {
    border: 1px solid black;
}

fieldset {
    margin-bottom: 10px;
}

JavaScript

jQuery(function($) {
    var run = function() {
        $('#output-form').html($($('#f').serializeArray()).map(function(ix, it) {
            return $('<div></div>').text(it.name + ":" + it.value)[0];
        }));
        $('#output-fieldset').html($($('#fs').serializeArray()).map(function(ix, it) {
            return $('<div></div>').text(it.name + ":" + it.value)[0];
        }));
    };
    
    $('#go').click(function(e) {
        e.preventDefault();
        run();
    });
    run();
});