php - PHP でアクセス可能な方法でフォーム要素のグループに AJAX を入力するにはどうすればよいですか?

Question

ユーザーがデータベースに既に存在するレコードを選択できるようにする検索オートコンプリート (ajax、jQuery UI) フィールドで始まるフォームに取り組んでいます。レコードが選択されると、フォームの残りのフィールドがユーザーに対して入力されます。これはうまくいきます。

フォーム内には、まとめて「ウィジェット」を説明するフィールドのグループがあります。これは、オートコンプリートが起動される前に存在するマークアップの例です。

<fieldset id="widgets">
    <div id="widget_1">
        <input type="text" name="widgets[0][name]" />
        <input type="text" name="widgets[0][color]" />
        <input type="text" name="widgets[0][shape]" />
        <input type="text" name="widgets[0][size]" />
    </div>
</fieldset>

nameフォームが送信されたときにバックエンドで適切な構造が得られることを期待して、この方法で属性を構造化しました。このマークアップは、現在何も存在しない場合にユーザーがレコードにウィジェットを追加できるように、ページが読み込まれるときに存在します。

追加のウィジェットが追加されると、構造は次のようになると想像しています。ユーザーが新しいウィジェットを既存のレコードに追加できるように、下部には常に空のウィジェット フィールドのグループが必要であることに注意してください。

<fieldset id="widgets">
    <div id="widget_1">
        <input type="text" name="widgets[1][name]" value="Alpha" />
        <input type="text" name="widgets[1][color]" value="Red" />
        <input type="text" name="widgets[1][shape]" value="Triangle" />
        <input type="text" name="widgets[1][size]" value="Large" />
    </div>

    <div id="widget_2">
        <input type="text" name="widgets[2][name]" />
        <input type="text" name="widgets[2][color]" />
        <input type="text" name="widgets[2][shape]" />
        <input type="text" name="widgets[2][size]" />
    </div>

    ...

</fieldset>

オートコンプリート ajax は、解析するすべてのウィジェットを含むすべてのレコードの配列を含む優れた JSON 構造を返します。

グループ化されたウィジェット フィールドをこの構造に追加するのに最適な方法は何ですか? idラッパーにインクリメントを追加することは、どの行に何が入っているかを把握するための良い方法ですか (またはデータ属性の方が良いでしょうか)?

私はこれにどのように取り組むべきかをよりよく理解しようとしています。