Format JSON on form submit

(Background) I am building a simple form builder where user will be able to create a survey/questionnaire. Am creating a json output once the user is done designing the form which will be used to create the actual form. Since its a form-builder user, who is designing/building the form, can add checkboxes or radio fields or selectbox options, and can edit their values and labels. HTML:

<form class="test-form droppedField checkbox">
<input type="text" name="title" placeholder="Title" class="ctrl-textbox editable"></input>
<input type="text" name="subtitle" placeholder="Sub Title" class="ctrl-textbox editable"></input>
<input type="text" name="name" placeholder="Name/Keyword" class="ctrl-textbox editable">
<input type="hidden" name="type" value="checkbox">
<ul>
    <li>
        <div class="ctrl-checkboxgroup children" name="children">
            <input type="checkbox">
            <input name="label" type="text" value="" placeholder="Option Label.." class="input-small editable">
            <input type="text" value="" name="value" placeholder="Option Value.." class="input-small editable opt-value">
        </div>
        <div class="ctrl-checkboxgroup children" name="children">
            <input type="checkbox">
            <input name="label" type="text" value="" placeholder="Option Label.." class="input-small editable">
            <input type="text" value="" name="value" placeholder="Option Value.." class="input-small editable opt-value">
        </div>
    </li>
</ul>....

I am stuck at a point where am generating the json. I want to be able to get a cleaner o/p with checkbox options/radio/selectbox options grouped together as 'children'. Sample json (that I think would be helpful):

[
    {
        "title": "Gender",
        "subtitle": "This is a required question.",
        "name": "gender",
        "children": [
            {
                "label": "Male",
                "value": "male"
            },
            {
                "label": "Female",
                "value": "female"
            },
            {
                "label": "Non traditional",
                "value": "nontraditional"
            }
        ]
    }
]

What am getting right now:

[
    {
        "title": "Gender",
        "subtitle": "This is a required question.",
        "name": "gender",
        "label":["Male", "Female", "Non traditional"],
        "value":["male", "female", "nontraditional"]
    } 
]

What I am doing:

$('.test-form').each(function () {
   output.push(JSON.stringify($(this).serializeObject()));
});

$.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;
        };

When I push the children to an array iterating over them:

obj = [];
$('.children').each(function (i,v) {
    obj.push(obj[v.name] = v.value);
});
console.log(obj);

I get:

["Male", "male", "Female", "female", "Non traditional", "nontraditional", label: "Non traditional", value: "nontraditional"] 

I am confused if I should re-structure my HTML or if I can alter the JSON output. Any sort of help is appreciated. Thank you in advance.