Создать вложенный объект JSON из структуры элементов HTML

Question

Я работаю на экране конфигурации рабочего процесса, и у меня есть структура ниже на уровне HTML:

<ul class="wfSteps">
 <li>
  <ul>
     <li><input type="text" value="a"></li>
  </ul>
  <ul class="sequential">
     <li><input type="text" class="stepName" value="seq of a"> 
     </li>
     <li>
        <ul class="parallel">
           <li><input type="text" class="stepName" value="par of a2"></li>
        </ul>
     </li>
  </ul>
  <ul class="parallel">
     <li><input type="text" class="stepName" value="par of a"></li>
  </ul>
 </li>
</ul>

Теперь я хочу экспортировать объект JSON в следующем формате:

{    "stepBracket": [
  {
    "combinationType": "Sequential",
    "stepList": [
      {
        "stepName": "<stepName>",
        "stepBracket": {
          "combinationType": "parallel",
          "stepList": [
            {
              "stepName": "<stepName>"
             }
          ]
        }
      },
      {
        "stepName": "<stepName>"
      }
    ]
  },
  {
    "combinationType": "parallel",
    "stepList": [
      {
        "stepName": "<stepName>"
      }
    ]
  }
]
}

Я попробовал метод карты Jquery, но застрял на уровне вложенности. Любое предложение, как я могу получить необходимые данные объекта Json.

function build($query) {
  return {
    stepBracket: $.map($query.find('ul'), function (item) { 
      var f = {
            stepName: "abc",
            sequential: [],
            parallel: []
         };
      return f;  
      })
  };
}

var result = build($(".wfSteps:first"));