htmlフォームでname属性に[]がついているものを配列/オブジェクトで管理したい。

実現したいこと

フォームの一部で、複数人の氏名をフォームで管理しているとします。

html

1<p>１人目</p>2<input type="text" name="member[0][sei]" value="日本" />3<input type="text" name="member[0][mei]" value="太郎" />4 5<p>2人目</p>6<input type="text" name="member[1][sei]" value="北海" />7<input type="text" name="member[1][mei]" value="道子" />

上記のように入力されたフォーム要素を、フロントのJavaScriptで、送信前に次のように、配列/オブジェクトで管理したいです。

js

1input = {2 member: [3 {4 sei: "日本"5 mei: "太郎"6 },7 {8 sei: "北海"9 mei: "道子"10 }11 ]12}

何も気にせず、フォーム送信すると、バックエンド側でうまい具合に配列に変換されますが、それをフロント側で制御できればと思っています。

やったこと

js

1const inputs = document.querySelectorAll('form input[type=text]')2inputs.forEach(function(ele){3 // ゴニョゴニョ4})

とすると、それぞれのtext要素にはアクセスできるのですが、
name属性のパースをできているわけではないため、うまく解決に至っていません。
何らかの方法はあるのでしょうか？

補足

加えて、より複雑なフォームになる場合は、さらに階層が増えることもあり、それらもうまく制御できると尚良いと思っています。

html

1<input type="text" name="member[0][info][0][aaa]" value="" />2<input type="text" name="member[0][info][1][aaa]" value="" />3<input type="text" name="member[1][info][0][aaa]" value="" />4<input type="text" name="member[1][info][1][aaa]" value="" />

ReactやVueなどで管理するという方法があるのは理解しているのですが、
必要な箇所が箇所だけなので、ライブラリを使用せず、プレーンなjavascriptで実装したいです