JSFiddle - React, Tailwind, and code Playground

HTML

<form id="js-serialize">
<!--<input name="title" placeholder="title" />-->
<input name="description" placeholder="description" />
<input name="source" placeholder="source" />
<input name="category" placeholder="category"/>
<input type="submit" name="submit" />
</form>

JavaScript

$(function() {
    $('input[type="submit"]').click(function() {
        var $data = $('#js-serialize').serializeArray();
        console.log($data);
        $.post('/echo/json', {
            'data': $data
        }, function(data) {
            console.log(data);
        }, 'json');
        return false;

    });

});
// Is it possible for the Form Data to send like this:
/*

data[title]:This is my sample title
data[description:This is an (optional) description but I'm filling it out as an example
data[source]:http://www.cnn.com
data[category]:animals

*/

// Instead of:
   
/*
data[0][name]:title
data[0][value]:This is my sample title
data[1][name]:description
data[1][value]:This is an (optional) description but I'm filling it out as an example
data[2][name]:source
data[2][value]:http://www.cnn.com
data[3][name]:category
data[3][value]:animals
*/