Добавить DIV после нажатия кнопки-переключателя с помощью JQuery использует только родительские данные

Question

Я хочу создать input-radio, где пользователи могут выбрать свою опцию и заполнить данные внутри этой опции, и добавили еще одну input-radio для заполнения других данных.Но, к сожалению, всякий раз, когда радио расширяется, используются все данные расширения Parent-data только ...

Отредактировано: Изменен фрагмент для лучшего понимания

Вы можете увидеть это изниже:

var index = 0;
$(document).on('click', '.choose_wdv', function() {
    //$(this).nextAll('.wdv_option:first').show();
    //$(this).nextAll('.slm_option:first').hide();
     $(".wdv_option").show();
     $(".slm_option").hide();
});

$(document).on('click', '.choose_slm', function() {
    //$(this).nextAll('.slm_option:first').show();
    //$(this).nextAll('.wdv_option:first').hide();
     $(".slm_option").show();
     $(".wdv_option").hide();
});

$(document).on('click', '.add-form-wdv_slm', addWDVSLMCombination);


function addWDVSLMCombination() {
  index++
  $("#sch8_wdvslm").append('<div class="wdv_slm_container" style="border-style: dotted; border-radius: 10px; border-width: thin; margin-top: 10px;">'+
   '<div class="form-group">'+
    '<label class="control-label" style="padding-left: 25px;">Select Method</label>'+
     '<a href="javascript:void(0);" class="btn btn-outline-warning removeSch8wdvslm">Remove</a>'+
      '<div class="input-group">'+
        '<div class="radio" style="padding-left: 25px;">'+
         '<label><input type="radio" required id="choose_wdv" value="wdvslm_wdv" name="schedule8WDVSLM'+ index +'" class="choose_wdv">WDV</label>'+
          '<label><input type="radio" required id="choose_slm" value="wdvslm_slm" name="schedule8WDVSLM'+ index +'" class="choose_slm">SLM</label>'+
        '</div>'+
      '</div>'+
    '</div>'+

    '<div class="wdv_option" style="display:none;">'+
        '<p style="padding-left: 10px;">AS PER WDV METHOD</p>'+
        '<div class="schedule-container" style="border-style: dotted; border-radius: 10px; border-width: thin; border-top-left-radius: 5px; border-top-right-radius: 5px;">'+
          '<div class="col-md-12">'+
           '<div class="row">'+
            '<div class="col-md-2">'+
             '<label for="assetName">Name</label><br>'+
              '<input type="text" id="assetName" name="wdvName[]" class="form-control">'+
                '</div>'+
                 '<div class="col-md-2">'+
                   '<label for="assetDOP">DOP</label><br>'+
                    '<input type="date" id="assetDOP" name="wdvDOP[]" class="form-control date_of_purchase">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                      '<label for="assetOC">OC</label><br>'+
                      '<input type="number" min="0" id="assetOC" name="wdvOC[]" class="form-control originalCost">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetWDV">WDV</label><br>'+
                        '<input type="number" min="0" id="assetWDV" name="wdvWDV[]" class="form-control assWDV">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetADD">ADD</label><br>'+
                        '<input type="number" min="0" id="assetADD" name="wdvADD[]" class="form-control addition">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetEUL">EUL</label><br>'+
                        '<input type="number" min="0" id="assetEUL" name="wdvEUL[]" class="form-control no_of_year">'+
                    '</div>'+
                '</div>'+
            '</div>'+

            '<div class="col-md-12" style="padding-bottom: 10px;">'+
                '<div class="row">'+
                    '<div class="col-md-2">'+
                        '<label for="assetBDA">BDA</label><br>'+
                        '<input type="number" readonly min="0" id="assetBDA" name="wdvBDA[]" class="form-control bdaValue">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetDays">Day Used</label><br>'+
                        '<input type="number" readonly min="0" id="assetDays" name="wdvDayUsed[]" class="form-control dayUsed">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetRateofDep">Rate of Dep.</label><br>'+
                        '<input type="number" readonly min="0" id="assetRateofDep" name="wdvRate[]" class="form-control rateOfDep">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetDepAmount">Dep. Amount</label><br>'+
                        '<input type="number" readonly min="0" id="assetDepAmount" name="wdvDepAmount[]" class="form-control depAmount">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetNetBlock">Net Block</label><br>'+
                        '<input type="number" readonly min="0" id="assetNetBlock" name="wdvNetBlock[]" class="form-control netBlock">'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>'+
    '</div>'+

    '<div class="slm_option" style="display:none;">'+
        '<p style="padding-left: 10px;">AS PER SLM METHOD</p>'+
        '<div class="schedule-container-slm" style="border-style: dotted; border-radius: 10px; border-width: thin;border-top-left-radius: 5px; border-top-right-radius: 5px;">'+
            '<div class="col-md-12">'+
                '<div class="row">'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetName">Name</label><br>'+
                        '<input type="text" id="slmassetName" name="slmName[]" class="form-control">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetDOP">DOP</label><br>'+
                        '<input type="date" id="slmassetDOP" name="slmDOP[]" class="form-control date_of_purchaseSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetOC">OC</label><br>'+
                        '<input type="number" min="0" id="slmassetOC" name="slmOC[]" class="form-control originalCostSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetWDV">WDV</label><br>'+
                        '<input type="number" min="0" id="slmassetWDV" name="slmWDV[]" class="form-control assWDVSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetADD">ADD</label><br>'+
                        '<input type="number" min="0" id="slmassetADD" name="slmADD[]" class="form-control additionSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetEUL">EUL</label><br>'+
                        '<input type="number" min="0" id="slmassetEUL" name="slmEUL[]" class="form-control no_of_yearSLM">'+
                    '</div>'+
                '</div>'+
            '</div>'+

            '<div class="col-md-12" style="padding-bottom: 10px;">'+
                '<div class="row">'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetBDA">BDA</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetBDA" name="slmBDA[]" class="form-control bdaValueSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetDays">Day Used</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetDays" name="slmDayUsed[]" class="form-control dayUsedSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetRateofDep">Rate of Dep.</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetRateofDep" name="slmRate[]" class="form-control rateOfDepSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetDepAmount">Dep. Amount</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetDepAmount" name="slmDepAmount[]" class="form-control depAmountSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetNetBlock">Net Block</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetNetBlock" name="slmNetBlock[]" class="form-control netBlockSLM">'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>'+
    '</div>'+

  '</div>');
  $("#sch8_wdvslm").on("click", ".removeSch8wdvslm", function() {
    $(this).closest('.wdv_slm_container').remove();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wdv_slm_container" style="border-style: dotted; border-radius: 10px; border-width: thin;">
 <div class="form-group">
  <label class="control-label" style="padding-left: 25px;">Select Method</label>
  <div class="input-group">
   <div class="radio" style="    padding-left: 25px;">
     <label><input type="radio" required id="choose_wdv" value="wdvslm_wdv" name="schedule8WDVSLM" class="choose_wdv">WDV</label>
      <label><input type="radio" required id="choose_slm" value="wdvslm_slm" name="schedule8WDVSLM" class="choose_slm">SLM</label>
    </div>
  </div>
</div>

<div class="wdv_option" style="display:none;">
  <p style="padding-left: 10px;">AS PER WDV METHOD</p>
  <div class="schedule-container" style="border-style: dotted; border-radius: 10px; border-width: thin; border-top-left-radius: 5px; border-top-right-radius: 5px;">
  <div class="col-md-12">
     <div class="row">
        <div class="col-md-2">
           <label for="assetName">Name</label><br>
              <input type="text" id="assetName" name="wdvName[]" class="form-control">
         </div>
              <div class="col-md-2">
                  <label for="assetDOP">DOP</label><br>
                  <input type="date" id="assetDOP" name="wdvDOP[]" class="form-control date_of_purchase">
              </div>
              <div class="col-md-2">
                  <label for="assetOC">OC</label><br>
                  <input type="number" min="0" id="assetOC" name="wdvOC[]" class="form-control originalCost">
              </div>
              <div class="col-md-2">
                  <label for="assetWDV">WDV</label><br>
                  <input type="number" min="0" id="assetWDV" name="wdvWDV[]" class="form-control assWDV">
              </div>
              <div class="col-md-2">
                  <label for="assetADD">ADD</label><br>
                  <input type="number" min="0" id="assetADD" name="wdvADD[]" class="form-control addition">
              </div>
              <div class="col-md-2">
                  <label for="assetEUL">EUL</label><br>
                  <input type="number" min="0" id="assetEUL" name="wdvEUL[]" class="form-control no_of_year">
              </div>
          </div>
      </div>

      <div class="col-md-12" style="padding-bottom: 10px;">
          <div class="row">
              <div class="col-md-2">
                  <label for="assetBDA">BDA</label><br>
                  <input type="number" readonly min="0" id="assetBDA" name="wdvBDA[]" class="form-control bdaValue">
              </div>
              <div class="col-md-2">
                  <label for="assetDays">Day Used</label><br>
                  <input type="number" readonly min="0" id="assetDays" name="wdvDayUsed[]" class="form-control dayUsed">
              </div>
              <div class="col-md-2">
                  <label for="assetRateofDep">Rate of Dep.</label><br>
                  <input type="number" readonly min="0" id="assetRateofDep" name="wdvRate[]" class="form-control rateOfDep">
              </div>
              <div class="col-md-2">
                  <label for="assetDepAmount">Dep. Amount</label><br>
                  <input type="number" readonly min="0" id="assetDepAmount" name="wdvDepAmount[]" class="form-control depAmount">
              </div>
              <div class="col-md-2">
                  <label for="assetNetBlock">Net Block</label><br>
                  <input type="number" readonly min="0" id="assetNetBlock" name="wdvNetBlock[]" class="form-control netBlock">
              </div>
          </div>
      </div>
  </div>
</div>

<div class="slm_option" style="display:none;">
  <p style="padding-left: 10px;">AS PER SLM METHOD</p>
  <div class="schedule-container-slm" style="border-style: dotted; border-radius: 10px; border-width: thin;border-top-left-radius: 5px; border-top-right-radius: 5px;">
      <div class="col-md-12">
          <div class="row">
              <div class="col-md-2">
                  <label for="slmassetName">Name</label><br>
                  <input type="text" id="slmassetName" name="slmName[]" class="form-control">
              </div>
              <div class="col-md-2">
                  <label for="slmassetDOP">DOP</label><br>
                  <input type="date" id="slmassetDOP" name="slmDOP[]" class="form-control date_of_purchaseSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetOC">OC</label><br>
                  <input type="number" min="0" id="slmassetOC" name="slmOC[]" class="form-control originalCostSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetWDV">WDV</label><br>
                  <input type="number" min="0" id="slmassetWDV" name="slmWDV[]" class="form-control assWDVSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetADD">ADD</label><br>
                  <input type="number" min="0" id="slmassetADD" name="slmADD[]" class="form-control additionSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetEUL">EUL</label><br>
                  <input type="number" min="0" id="slmassetEUL" name="slmEUL[]" class="form-control no_of_yearSLM">
              </div>
          </div>
      </div>

      <div class="col-md-12" style="padding-bottom: 10px;">
          <div class="row">
              <div class="col-md-2">
                  <label for="slmassetBDA">BDA</label><br>
                  <input type="number" readonly min="0" id="slmassetBDA" name="slmBDA[]" class="form-control bdaValueSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetDays">Day Used</label><br>
                  <input type="number" readonly min="0" id="slmassetDays" name="slmDayUsed[]" class="form-control dayUsedSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetRateofDep">Rate of Dep.</label><br>
                  <input type="number" readonly min="0" id="slmassetRateofDep" name="slmRate[]" class="form-control rateOfDepSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetDepAmount">Dep. Amount</label><br>
                  <input type="number" readonly min="0" id="slmassetDepAmount" name="slmDepAmount[]" class="form-control depAmountSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetNetBlock">Net Block</label><br>
                  <input type="number" readonly min="0" id="slmassetNetBlock" name="slmNetBlock[]" class="form-control netBlockSLM">
              </div>
          </div>
      </div>
  </div>
</div>
</div>

                                                        <div id="sch8_wdvslm"></div>
                                                        <button type="button" style=" margin-top: 10px;margin-bottom: 10px!important;" class="btn btn-primary btn-sm add-form-wdv_slm">Add More</button>

Возможно, то, как я пытался, совершенно неверно ...

Я не хочу использовать id для добавления данныхпричина, по которой расширенный максимум не установлен и пытается приблизиться, используя только class name.

Есть ли какой-либо другой способ сделать это легко и понятно и сохранить 1 имя класса для функции управления

Answer 1

Я обновил ваш код, пожалуйста, посмотрите на это, если он вам поможет

 $(document).on('click', '.t1', function () {
            if ($(this).parent().attr("id") == "append_both") {
                $(this).nextAll().eq(1).show();
                $(this).nextAll().eq(2).hide();
            }
            else {
                $('#t1_data').show();
                $('#t2_data').hide();
            }
        });

        $(document).on('click', '.t2', function () {
            if ($(this).parent().attr("id") == "append_both") {
                $(this).nextAll().eq(1).show();
                $(this).nextAll().eq(0).hide();
            }
            else {
                $('#t2_data').show();
                $('#t1_data').hide();
            }
        });

        $(document).on('click', '.append-radio', function () {

            var len = $('#append_both hr').length;
            addMoreRadio('test_data' + len);

        });

        function addMoreRadio(name) {
            $('#append_both').append(
              '<hr><input type="radio" name="' + name + '" class="t1"> Test 1' +
              '<input type="radio" name="' + name + '" class="t2">Test 2' +

              '<div class="t1_data" style="display:none;">' +
                'This is Test 1 Expanded' +
              '</div>' +

              '<div class="t2_data" style="display:none;">' +
                'This is Test 2 Expanded' +
              '</div>'
            );
        }

Answer 2

Working Fiddle http://jsfiddle.net/shree/xpvt214o/793020/

Вы можете определить переменную и увеличить эту переменную и добавить эту переменную к разделу имени для уникальности по радио перед привязкой, как показано ниже для группировки.

var index = 0;
$(document).on('click', '.t1', function() {
 
  $(this).nextAll('.a:first').show();
  $(this).nextAll('.b:first').hide();
});

$(document).on('click', '.t2', function() {
  $(this).nextAll('.b:first').show();
  $(this).nextAll('.a:first').hide();
});

$(document).on('click', '.append-radio', addMoreRadio);

function addMoreRadio() {
  index++
  $('#append_both').append(
    '<input type="radio" name="test_data' + index + '" class="t1"> Test 1' +
    '<input type="radio" name="test_data' + index + '" class="t2">Test 2' +

    '<div class="a" style="display:none;">' +
    'This is Test 1 Expanded' +
    '</div>' +

    '<div class="b" style="display:none;">' +
    'This is Test 2 Expanded' +
    '</div>'
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="test_data" class="t1"> Test 1
<input type="radio" name="test_data" class="t2">Test 2



<div class="a" style="display:none;">
  This is Test 1
</div>

<div class="b" style="display:none;">
  This is Test 2
</div>


<div id="append_both"></div>
<button type="button" class="append-radio">Add More</button>

Примечание: ID всегда уникален, поэтому используйте класс.Приведенный выше пример заменяет ваш идентификатор на класс.