Need help getting the data into a serialized format

help.jsx

<GridRow reset>
  <GridColumn col='half'>
    <div className='form-group'>
      <select
        name='document_type[]'
        id='document_type'
        required
      >
        <option value=''>Document Type</option>
        <option value'britain'> Britain </option>
        <option value'canada'> Canada </option>
        <option value'nigeria'> Nigeria </option>
      </select>
    </div>
  </GridColumn>
  <GridColumn col='half'>
    <div className='form-group'>
      <input
        type='text'
        placeholder='Document number'
        name='document_number[]'
        id='document_number'
        className='form-control'
        autoComplete='off'
        required
      />
    </div>
  </GridColumn>
</GridRow>

<GridRow reset>
  <GridColumn col='half'>
    <div className='form-group'>
      <select
        name='document_type[]'
        id='document_type'
        required
      >
        <option value=''>Document Type</option>
        <option value'britain'> Britain </option>
        <option value'canada'> Canada </option>
        <option value'nigeria'> Nigeria </option>
      </select>
    </div>
  </GridColumn>
  <GridColumn col='half'>
    <div className='form-group'>
      <input
        type='text'
        placeholder='Document number'
        name='document_number[]'
        id='document_number'
        className='form-control'
        autoComplete='off'
        required
      />
    </div>
  </GridColumn>
</GridRow>

<GridRow reset>
  <GridColumn col='half'>
    <div className='form-group'>
      <select
        name='document_type[]'
        id='document_type'
        required
      >
        <option value=''>Document Type</option>
        <option value'britain'> Britain </option>
        <option value'canada'> Canada </option>
        <option value'nigeria'> Nigeria </option>
      </select>
    </div>
  </GridColumn>
  <GridColumn col='half'>
    <div className='form-group'>
      <input
        type='text'
        placeholder='Document number'
        name='document_number[]'
        id='document_number'
        className='form-control'
        autoComplete='off'
        required
      />
    </div>
  </GridColumn>
</GridRow>

or better yet setting the name in this kind of format

{
document_type: [
0:'nigeria',
1:'canada',
2:'nigeria'
],
document_number: [
0: 'data',
1: 'data',
2: 'data 3'
]
}

Here is php version of the data i want