jQueryでselectにoptionを挿入したい

Question

jqueryを使用して「追加する」ボタンを押すたびに、
「.addArea」内に年と月のプルダウンメニューが追加されていく機能を
作りたいです。

下記の様に作成すると、年と月を変更していても、
追加されたプルダウンメニューによって上書きされてしまいます。
(1つ目の.select_wrapにあるyearを「2010」,monthを「5」としていても、
2つ目.３つ目と.select_wrapを追加すると既に表示されているyearとmonthが「選択してください」に
戻ってしまう)
class名で広義に指定しているせいかと思い、.select_wrapにid="select_wrap_'+(i)+'"を付与。
そのidの子要素にあるselect[name=year]にappendしても同じように上書きされてしまいます。

selectが追加されてもoptionが上書きされないようにするためには、
どのような書き方が良いのでしょうか？
良い書き方があれば教えて頂きたいです。

● HTML

	<div class="addArea">
<!-- 追加するボタンを押すと、ここに年と月のプルダウンメニューがどんどん追加されていく-->
	</div>
　　<button type="button"  id="Add_btn"追加する</button>

●jquery

//ボタンを押すたびにプルダウンメニューが表示される
    $(document).on('click', '#Add_btn', function(){
      var i = $(".addArea .select_wrap").size()+1;

      let selecter = '<div class="select_wrap"><select name="year[]"></select><select name="month[]"></select></div>';

      $('.addArea').prepend(selecter);
      i++;

//年と月の取得
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1

//年のoptionを作成し、selectに挿入処理
     for (let y = 1500; y <= year; y++) {
        let yOption = "<option value=" + y + ">"+ y +"</option>";
        if(y == 2000){
          yOption += "<option value='-1' selected>"+ "選択してください" +"</option>"
        }
        $('.select_wrap').find('select[name=year]').append(yOption);
      }

//月のoptionを作成し、selectに挿入処理
      for (let m = 0; m <= 12; m++) {
          if(m == 0){
            let mOption = "<option value='-1' selected>"+ "選択してください" + "</option>"
　　　　
　　　　$('.select_wrap').find('select[name=month]').append(mOption);
          }else{
            let mOption = "<option value=" + (m) + ">"+ (m) +"</option>"
            $('.select_wrap').find('select[name=month]').append(mOption);
          }
        }
        return false;
    });

使用言語：
HTML
jQuery

Answer 1

自己解決しました～！
嬉しかったのでここに分かった事残しておきます。

$('.addArea').prepend(selecter); の時は各セレクタにidを付与するだけ。

$('.addArea').append(selecter);にしたい場合は、
各セレクタにidを付与、
変数selecterの「.select_wrap」に「.new_select_date」を付けておいて、
$(".new_select_date").each(function(){});を追加。
↑の末尾に$(".select_wrap").removeClass("new_select_date")を追加して対応できました！

Answer 2

'select[name=year]'や'select[name=month]'を指定していますが
HTML上のnameは「[]」がついています

'select[name="year[]"]'や'select[name="month[]"]'のような指定が必要です

Answer 3

$('.select_wrap') と書くとページ中のすべての class="select_wrap" の要素が選択されるのでよろしくないですね。
$('.addArea').prepend(selecter); の次に const selectWrap = $('.select_wrap').eq(0); とでもして、それ以降の $('.select_wrap'). をすべて selectWrap. に変更すればいいんじゃないでしょうか。

.select_wrapにid="select_wrap_'+(i)+'"を付与。そのidの子要素にあるselect[name=year]にappend

その方針でも直せるはずです。

Comments

[nanashi-_.eng05]

>$('.addArea').prepend(selecter); の次に const selectWrap = $('.select_wrap').eq(0); とでもして、それ以>降の $('.select_wrap'). をすべて selectWrap. に変更すればいいんじゃないでしょうか。
1個目に限らず、2個目、3個目も追加していくたびに上書きされてしまうので、
これだけだと対処が追い付きませんでした。

>.select_wrapにid="select_wrap_'+(i)+'"を付与。そのidの子要素にあるselect[name=year]にappend
>
>その方針でも直せるはずです。
int32_tさんの環境では正しく動きましたか？
私の方ではその形で修正してもだめでした・・・

[int32_t]

> これだけだと対処が追い付きませんでした。

直らなかったということですか? どういうコードになりましたか?

> int32_tさんの環境では正しく動きましたか？

私は質問文のコードはまったく動かしてないですし、修正後のコードも書いていません。

> 私の方ではその形で修正してもだめでした・・・

どこかでミスしてたのでしょう。うまくいかなかったコードを開示していただければ助言できると思います。