JSFiddle - React, Tailwind, and code Playground

HTML

<form id="frm" data-id="123" data-list[key1]="value1" data-list[key2]="value2">
    <input type="text" name="title" value="Test title"><br/>
    <input type="text" name="body" value="Test body"><br/>
    <input type="text" name="something" value="Something else"><br/>
    <button id="btn">Serialize</button>
</form>

<span id="result"></span>

CSS

#result {
     display:block;
     color:#aa3300;
     width:300px;
     margin:5px;
     word-wrap:break-word;
}

JavaScript

$(function() {
    $('#btn').on('click', function(e) {
        e.preventDefault();
        var form = $('#frm');
        
        var dataarr = new Array();
        for(var i in form.data()) {
            var subarr = new Array();
            subarr['name'] = i;
            subarr['value'] = form.data()[i];
            dataarr.push(subarr);
        }

        var serialized = $.param(form.serializeArray().concat(dataarr));
        
        $('#result').text(serialized);
        
        $.ajax({
            type: "POST",
            url: "http://nowhere/",
            data: serialized,
            dataType: "json"
        });
    });
});