jquery - SerializeJSON を使用してフォームをシリアル化する

Question

SerializeJSON を使用してフォームをシリアル化したいのですが、内部に複数のタブがあり、各タブに複数のフォームがある div があります。div内をループしてタブを取得し、各タブ内でフォームを取得してシリアル化し、その後、目的の構造に従って配列内に配置するにはどうすればよいですか。

<div class="clamp-content">
<div id="tab1">

<form id="materialinfo">
<input name="plateMaterial">
<input name="plateMaxAllowableStressDesignTemperature">
</form>


<form id="defectparam">
<input name="Def_L">
<input name="DefL_2">
</form>

</div>

<div id="tab2">
<form id="materialinfo">
<input name="plateMaterial">
<input name="plateMaxAllowableStressDesignTemperature">
</form>


<form id="defectparam">
<input name="Def_L">
<input name="DefL_2">
</form>
</div>
</div> 

私が望む欲望構造は次のようなものです：

CaseInfo: 
0: {{plateMaterial:"plateMaxAllowableStressDesignTemperature"}, {Def_L: "", DefL_2: ""}
1: {{plateMaterial:"plateMaxAllowableStressDesignTemperature"}, {Def_L: "", DefL_2: ""}

私はこのようなことを試しました：

var designParameter = [];
var form = {};

function save() {
    $('.clamp-content').children().each(function () {
        $(this).find('form').each(function () {
            form = $(this).serializeJSON();
            console.log(form)
        });

    });
} 

しかし、フォームをコンソールログに記録すると、次のようになります。

{plateMaterial: "", plateMaxAllowableStressDesignTemperature: "", plateMaxAllowableStressOperatingTemperature: "", plateThickness: "", boltMaterial: "", …}
{Def_L: "", DefL_2: "", Def_D: "", DefD_3: "", DefD_2: "", …}
{plateMaterial2: "", plateMaxAllowableStressDesignTemperature2: "", plateMaxAllowableStressOperatingTemperature2: "", plateThickness2: "", boltMaterial2: "", …}
{Def_L2: "", DefL_22: "", Def_D2: "", DefD_32: "", DefD_22: "", …}

どんな助けでも大歓迎です。ありがとうございました ：）