新規追加1コンテンツを他のコンテンツと連動しないようにしたい

Question

全体の説明として
＋ボタンを押下で1コンテンツを追加でき、
-ボタンを押下でボタンが付属するコンテンツを削除できます。
1コンテンツ目のプルダウンで「なし」以外を選択すると「追記」項目が表示されます。

現状
＋ボタン押下で2コンテンツ目を追加し、その中のプルダウンを選択しても「追記」項目が表示できません。
1コンテンツ目内でプルダウンを非表示にすると2コンテンツ目と連動し、2コンテンツ目のプルダウンも
非表示になってしまいます。

どうしたいか
これを修正し、1コンテンツ目内では「追記」項目を表示、
2コンテンツ目では「追記」項目を非表示という風に、各コンテンツごとに別々の内容にするには
どうすればよろしいでしょうか。

このようになっている理由は、コンテンツがそれぞれ独立していないからだと思い、
各コンテンツに番号を振るか、または、.index()で何番目のコンテンツかを把握し、
プルダウンがそれぞれ別のコンテンツ内にあるということを記述すればよいのかな　と思っていますが、
いまいち方法がわかりません。

ご教授いただけませんでしょうか。

<div class="ice_inner">
  <form class="input-form">
    <div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
    <fieldset>
      <div class="form-group input-text mb-3 mb-4">
        <p class="text input-title mb-2 fs18">アイス
        </p>
        <div class="select-area m-0">
          <div class="form__select__80 delete--auto--area mx-auto">
            <div class="input-form__select form-group indent text-left mr-3 mb-3 m-0 col-lg-6">
              <select name="select--ice[]">
                <option value="select--non" selected="selected">なし</option>
                <option value="select--a">バニラ</option>
                <option value="select--b">ストロベリー</option>
                <option value="select--c">抹茶</option>
                <option value="select--d">チョコ</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset>
      <div class="form-group input-text mb-3 mb-4 area--password" style="display: none;">
        <p class="text input-title mb-2 fs18">追記

        </p>
        <div class="select-area m-0">
          <input type="password" name="ice_security_password[]" class="form-control input-form__text" placeholder="" required="">
        </div>
      </div>
    </fieldset>
    <div class="button--delete--ice col-md-10">
      <button class="float-right">ー</button>
    </div>
    <div class="button--add--ice col-md-10">
      <button class="float-right">＋</button>
    </div>
  </form>
</div>

.ice_inner{
padding-top: 55px !important;
  position: relative;
}
.button--delete--ice{
top: 1em;
right: 7em;
position:absolute;
}
.button--add--ice{
top: 1em;
right: 3em;
position:absolute;
}

$(function(){

  $('.input-form__select select[name="select--ice[]"]').change(function() {

    let $select = $(this);
    let index = $select.index(this);
    let value = $select.val();
    let optionText = $select.find(':selected').text();

    switch (optionText) {
      case 'select--non':
        $(this).$('div.area--password').css('display','none');
        break;
      case 'select--a':
      case 'select--b':
      case 'select--c':
      case 'select--d':
        $(this).$('div.area--password').css('display','block');
        break;
    }

    /* 下記記述を↑上の方式で書きたい */
    if ($('select[name="select--ice[]"] option:selected').val() == 'select--non') $('div.area--password').css('display','none');
  });
  $('.input-form__select select[name="select--ice[]"]').change(function() {
    if ($('select[name="select--ice[]"] option:selected').val() == 'select--a') $('div.area--password').css('display','block');
  });
  $('.input-form__select select[name="select--ice[]"]').change(function() {
    if ($('select[name="select--ice[]"] option:selected').val() == 'select--b') $('div.area--password').css('display','block');
  });
  $('.input-form__select select[name="select--ice[]"]').change(function() {
    if ($('select[name="select--ice[]"] option:selected').val() == 'select--c') $('div.area--password').css('display','block');
  });
  $('.input-form__select select[name="select--ice[]"]').change(function() {
    if ($('select[name="select--ice[]"] option:selected').val() == 'select--d') $('div.area--password').css('display','block');
  });
  -->
});


  /* tab ice add new contents */
  $(function(){
    $('.button--add--ice').on('click',function(){

      // 現在押されたボタン位置を取得
      var index_this = $(".button--add--ice").index(this);

      // 現在押されたボタン位置にある要素の下に同じ要素を追加
      $(".ice_inner:eq(" + index_this + ")").after($(".ice_inner:eq(" + index_this + ")").clone(true));


      // 現在押されたボタン位置から追加された要素の位置を設定
      var index_added = index_this + 1;

      // 項目を初期化する。（※ファイルの項目初期化は懸案）
      $('.ice_inner').eq(index_added).find("input[type='text']").val('');
      $('.ice_inner').eq(index_added).find("input[type='checkbox']").prop('checked',false);

 
    });
    
    
    $('.button--delete--ice').on('click',function(){

      // 要素がすべて削除された場合は未設定状態に戻す。
      if($('.ice_inner').length == 1) {
        $('.ice_inner').addClass('d-none');
        $('.ice_inner:eq(0)').find("input[type='text']").val('');
        $('.ice_inner:eq(0)').find("input[type='checkbox']").prop('checked',false);
        $('#ice .tab--nothing').removeClass('d-none');
        $('li.ice .text-status').addClass('d-none');
        $('li.ice .text-status-none').removeClass('d-none');
        $('p.text--lead--ice').addClass('d-none');
      }

      // 現在押されたボタン位置を取得
      var index_this = $(".button--delete--ice").index(this);

      // 現在押されたボタン位置にある要素を削除する。
      if($('.ice_inner').length > 1) {
        $(".ice_inner:eq(" + index_this + ")").remove();
      }

    });
  });

Answer 1

index を取得するよりも、.closest() で範囲を絞ったほうが簡単かもしれません。

    //let optionText = $select.find(':selected').text();
    let optionText = $select.val();

        //$(this).$('div.area--password').css('display','block');
        $('div.area--password', $select.closest('.ice_inner')).css('display','block');

Comments

[up24]

.closest() で範囲を絞る、ありがとうございます！
その方法でやってみます。