I am using the x-ray module to scrape data like the following HTML code. How to scrape a definition list like this with x-ray?

<div class="content">
    <h1>Title</h1>
    <div class="productDetails">
        <dl>
            <dt>1</dt>
            <dd>A</dd>
            <dt>2</dt>
            <dd>B</dd>
            <dt>3</dt>
            <dd>C</dd>
        </dl>
    </div>
</div>

I'd like to get the following result:

[
  {
    "productTitle": "Title",
    "productDetails": [
      {
        "attrName": "1",
        "attrDesc": "A"
      },
      {
        "attrName": "2",
        "attrDesc": "B"
      },
      {
        "attrName": "3",
        "attrDesc": "C"
      }
    ]
  }
]

Here is the code I used to scrape the content:

    x(url, '.content', [
    {
      productTitle: 'h1',
      productDetails1: x('div.productDetails', [{attrName: ['dl dt'], attrDesc: ['dl dd | remove_whitespace']}]),
      productDetails2: x('div.productDetails dl', ['dt', 'dd']),
    }
  ])

But I get this result:

[
  {
    "productTitle": "Title",
    "productDetails_1": [
      {
        "attrName": [
          "1",
          "2",
          "3"
        ],
        "attrDesc": [
          "A",
          "B",
          "C"
        ]
      }
    ],
    "productDetails_2": [
      "1",
      "2",
      "3"
    ]
  }
]

How to get the data in the structure I described above?