JSの子要素のvalue値をループでセット

HTML
1<!-- A グループ -->
2<div id="groupA">
3    <div class="formGroup">
4        <input type="text">
5        <input type="hidden" name="Aa" value="">
6    </div>
7    <div class="formGroup">
8        <input type="text">
9        <input type="hidden" name="Ab" value="">
10    </div>
11    <div class="formGroup">
12        <input type="text">
13        <input type="hidden" name="Ac" value="">
14    </div>
15</div>
16<!-- B グループ -->
17<div id="groupB">
18    <div class="formGroup">
19        <input type="text">
20        <input type="hidden" name="Ba" value="">
21    </div>
22    <div class="formGroup">
23        <input type="text">
24        <input type="hidden" name="Bb" value="">
25    </div>
26    <div class="formGroup">
27        <input type="text">
28        <input type="hidden" name="Bc" value="">
29    </div>
30</div>

上記のようなコードでJSまたはJQueryを使用して「hidden」の「value」値を下記のようにグループごとに上から1~を代入したいのですが、
やり方がわかりません。
※実際のname値は不規則にセットされます

例
Aa = １
Ab = 2
Ac = 3

初歩的な質問で申し訳ないのですが、ご教授よろしくお願い致します。

※追記１
各グループには別のJSでformGroupが追加できる機能があり、
そのさいに不規則な文字でhiddenのnameに値が入ります。
POSTでPHPに渡す直前にhiddenのvalue上から順番に番号を入れていき、
並び順をDBに保存したいのです。

行動規範の内容に同意します

回答1件

ベストアンサー

<form> でマークアップしてみてはどうでしょう。

HTML
1<!-- A グループ --> 
2<form id="groupA">
3    <div class="formGroup">
4        <input type="text">
5        <input type="hidden" name="Aa" value="">
6    </div>
7    <div class="formGroup">
8        <input type="text">
9        <input type="hidden" name="Ab" value="">
10    </div>
11    <div class="formGroup">
12        <input type="text">
13        <input type="hidden" name="Ac" value="">
14    </div>
15</form>
16<!-- B グループ -->
17<form id="groupB">
18    <div class="formGroup">
19        <input type="text">
20        <input type="hidden" name="Ba" value="">
21    </div>
22    <div class="formGroup">
23        <input type="text">
24        <input type="hidden" name="Bb" value="">
25    </div>
26    <div class="formGroup">
27        <input type="text">
28        <input type="hidden" name="Bc" value="">
29    </div>
30</form>
31
32<script>
33(function () {
34  function sample (form, selectorsText) {
35    for (var i = 1, elements = form.querySelectorAll(selectorsText), l = elements.length + 1; i < l; ++i) {
36      elements[i].value = i;
37    }
38  }
39
40  sample(document.getElementById('groupA'), 'input[type=hidden]');
41  sample(document.getElementById('groupB'), 'input[type=hidden]');
42}());
43</script>