同一処理のjQuery（プルダウン連動）を複数セット作りたい

Question

前提・実現したいこと

jQueryにてプルダウン連動を行っています。
項目数が複数になった場合に1個ずつ設定すれば動くのですが、一つにまとめる事が出来ません。
ソースが長くなるため、一つにまとめたうえで対象プルダウンが連動するようにしたいです。
初心者の初質問となり、足りない部分もあるかと思いますが宜しくお願い致します。

該当のソースコード

parent_Combo= "<OPTION value='' class='msg'>------</OPTION>"'都道府県
children_Combo= "<OPTION value='' class='msg'>------</OPTION>"'市区町村
'データベースより名称とコードを読込み、Loopにて順番にComboへ流していく。
'△△が都道府県コード・〇〇が市区町村コード・都道府県名及び市区町村名はコードに紐付く名称データを表示。
Do While
　parent_Combo = parent_Combo & "<OPTION value='△△'>"都道府県名"</OPTION>"
　children_Combo= children_Combo& "<OPTION value='〇〇' data-val='△△'>"市区町村名"</OPTION>"
Loop

<TABLE class="tbl" id="tbl_count1">
<TR>
　<TH>【1】推薦都道府県/推薦市町村</TH>
　<TD>
　　<!--VBScriptにて取得のCombo利用-->
　　<SELECT class="parent" ID='S_parent1' name="S_parent1"><%=parent_Combo%></SELECT>
　　<SELECT class="children" ID='S_children1' name="S_children1"><%=children_Combo%></SELECT>
　　<INPUT class="S_Name" TYPE=TEXT ID="S_Name1" NAME="S_Name1" VALUE="">
　</TD>
</TR>
<TR>
　<TH>【1】自薦都道府県/自薦市町村</TH>
　<TD>
　　<SELECT class="parent" ID='J_parent1' name="J_parent1"><%=parent_Combo%></SELECT>
　　<SELECT class="children" ID='J_children1' name="J_children1"><%=children_Combo%></SELECT>
　　<INPUT class="J_Name" TYPE=TEXT ID="J_Name1" NAME="J_Name1" VALUE="">
　</TD>
</TR>
</TABLE>

<TABLE class="tbl" id="tbl_count2">
<TR>
　<TH>【2】推薦都道府県/推薦市町村</TH>
　<TD>
　　<SELECT class="parent" ID='S_parent2' name="S_parent2"><%=parent_Combo%></SELECT>
　　<SELECT class="children" ID='S_children2' name="S_children2"><%=children_Combo%></SELECT>
　　<INPUT class="S_Name" TYPE=TEXT ID="S_Name2" NAME="S_Name2" VALUE="">
　</TD>
</TR>
<TR>
　<TH>【2】自薦都道府県/自薦市町村</TH>
　<TD>
　　<SELECT class="parent" ID='J_parent2' name="J_parent2"><%=parent_Combo%></SELECT>
　　<SELECT class="children" ID='J_children2' name="J_children2"><%=children_Combo%></SELECT>
　　<INPUT class="J_Name" TYPE=TEXT ID="J_Name2" NAME="J_Name2" VALUE="">
　</TD>
</TR>
</TABLE>
・
・
・
このまま上記TABLEが20個ほど続きます（For Loopにて）

//連動
$(function() {
  var $children = $('.children');
  var original = $children.html();

  $('.parent').change(function() {
    var val1 = $(this).val();
    $children.html(original).find('option').each(function() {
      var val2 = $(this).data('val');
      if (val1 != val2) {
        $(this).not('optgroup,.msg').remove();
      }
    });
  });
});

//推薦市区町村名を出力
$(function() {
  $('.children').change(function() {
	var selected = $('.children option:selected').text();
    $('.S_Name').val(selected);
  });
});

//自薦市区町村名を出力
$(function() {
  $('.children').change(function() {
	var selected = $('.children option:selected').text();
    $('.J_Name').val(selected);
  });
});

試したこと

本サイトにて既出の質問などを参考に件数分Loopを回すなど試しましたが、
全く動かなくなるか、動いても全ての項目で連動されてしまいます。
まずは勉強と思い数時間ほど調べながら格闘してきましたが、力及ばず。。。
独学の初心者ということもあり、気になる点は多くあるかと思いますが、お力添えお願い致します。

補足

ソースが汚く分かり難いかもしれませんが、
プルダウン「都道府県」を選択した際に「市区町村」の選択しをdata-valが一致する内容のみに切り替えるという内容です。
上記の動きを【推薦都道府県/推薦市区町村】【自薦都道府県/自薦市区町村】の２項目を1セットとして、20回ForLoopにて回しております。
1個目の都道府県を選択しても、ｎ個目の都道府県を選択しても、全ての市区町村が置き換わってしまうため、
1個目ならば1個目を、ｎ個目ならばｎ個目の市区町村切り替えとさせたいです。

Comments

[yambejp]

htmlで2～3個仕組みを例示してみてください
推薦と自推の関係がよくわかりません
どうリンクして処理したいのでしょうか？

[Program_]

自薦と推薦は全く同じ内容になり、表示名のみ違うというイメージです。
都道府県名で例を挙げたのが不味かったですね。
学校を例にすると、

１つ目のテーブル
学級委員長
自選「性別」「氏名」
推薦「性別」「氏名」
2つ目のテーブル
書記
自選「性別」「氏名」
推薦「性別」「氏名」
3つ目のテーブル
会計
自選「性別」「氏名」
推薦「性別」「氏名」

上記のようにタイトル名が異なるだけでプルダウンはそれぞれの「性別」と「氏名」が連動しあってるイメージです。
（性別で男を選んだらクラスの男性のみが氏名に表示される）

出先のため携帯からの投稿となりソースを上げる事が難しいため文章にて書かせて頂きました。
最終的には追加ボタンをクリックするとテーブルが増減するという仕組みを考えており、部分抜粋したため分かりにくい内容となりましたが、
「性別（都道府県名）」と「氏名（市区町村）」が連動する。
それらが1テーブルに2セット有り、テーブル数が可変となります。

質問が悪く申し訳ございませんが、不明点ございましたら更に仰って下さい。宜しくお願いします

[yambejp]

selectタグで、例示してください
何をどうするとどうしたいのかも書き添えてください

[Program_]

質問方法が悪く申し訳ございませんでした。
本件についてはx_x様のおかげで実装できましたが、
質問する機会があれば、もっと意図が伝えられるよう精進していきます。
反応頂きありがとうございました。

Answer 1

すべて同じオプションとして。
$(selector) としてしまうとすべて取得してしまうので、Tree Traversal カテゴリのメソッドなどでたどるようにしてください。

$(function() {
  var original = $('.children').eq(0).clone(false);

  $(document).on('change', '.parent', function(event) {
    var target = $(event.target);
    var val = target.val();
    var select = original.clone();
    $('option', select).each(function(index, element) {
      var option = $(element);
      if (!option.hasClass('msg') && option.attr('data-val') !== val) {
        option.remove();
      }
    });
    target.next().replaceWith(select);
    select.trigger('change');
  });

  $(document).on('change', '.children', function(event) {
    var target = $(event.target);
    target.next().val($('option:selected', target).text());
  });
});

https://api.jquery.com/category/traversing/tree-traversal/

Comments

[Program_]

回答ありがとうございます。出来ました！！！
連動だけではなく、テキストの出力部分まで実装頂きありがとうございます。
ソースの内容をしっかり理解し勉強させて頂きます。
本当にありがとうございます！