Jquery раскрывающийся список со скрытой формой, не работающей после клонирования

Question

У меня есть форма с раскрывающимся списком, содержащим названия продуктов питания, а другая - с полем ввода, позволяющим пользователю вводить цену. ниже у меня есть еще одно раскрывающееся меню с class="IfNotAvailableSelectable", которое содержит 3 варианта со значениями: 0,1,2. и у меня есть кнопка под названием «addMore» для клонирования всего в div с помощью class="divContainer"

, вот чего я хочу достичь:

1. Когда пользователь нажимает «addmore» ", он должен клонировать все в div с помощью class="divContainer" и добавить его в div с помощью class="addMoreContent"., что мне удалось успешно сделать.

2. Когда пользователь выбирает раскрывающийся список с class="IfNotAvailableSelectable" и значением = 0, он показывает div с class = "thenBuy", иначе он должен скрыть его. Теперь проблема заключается в том, что всякий раз, когда я нажимаю кнопку addmore и выбираю раскрывающийся список со значением параметра 1 или 0 или 2, исходный клонированный div также изменяется вместе с ним,

, поэтому e, g: if i выберите значение 1, я ожидаю, что div с class="thenBuy" будет скрыт, но когда на кнопке addmore и выберите раскрывающийся список со значением = 0, он также покажет div с class = "thenBuy" в 1-м, в то время как я не не хочу этого. Пожалуйста, помогите, или, если есть, лучшее решение для этого. Буду очень признателен. Спасибо HTML:

$(document).ready(function () {

  //clone
var divContainer = $(".divContainer");
var addMoreContent = $(".addMoreContent");
var addMoreBtn = $(".addMoreBtn");
  var removeItem = $(".removeItem");
  addMoreBtn.click(function () {



    divContainer.clone(true).appendTo(addMoreContent);
    

  });

  removeItem.click(function (e) {
    $(this).closest('div').remove();
    e.preventDefault();
  });
  
  //then buy functionO(when user selects "buy alternative")
  $(document).on('change', '.IfNotAvailableSelectable', function () {


    console.log($(this).val())
    var MainNav = $(this).val();

    if (MainNav == 0) {
      $(".thenBuy").show();
    } else {
      $(".thenBuy").hide();
    }


  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- card body-->
<div class="card-body bg-white divContainer" >
   <!-- delete button -->
<button type="button" class="close col-1 bg-white removeItem" >
          <span>×</span>
        </button>
  <!-- items -->
<select class=" custom-select text-capitalize">
  <option  >Waakye </option>
  <option >Banku</option>
  <option >Plain Rice</option>
</select>
<br>
<br>
<!-- price -->
  <div >
    <input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " > 
    <!-- "min" above should be the value of the  starting price of the selected item  and placeholder strating price should be the value of the starting price of the selected item too-->
    </div>
    <br>
<!-- if item is not available --> 
<div  style="font-size: medium;" >
<select  class="custom-select  text-capitalize IfNotAvailableSelectable">
  <option value="0" >If item is not available</option> 
  <option value="1" >Remove it from my order </option>
  <option value="2">Cancel entire order</option>
</select>
<br>
<!-- then buy -->
<div class="thenBuy"   >
<div>
 <span>Then Buy</span>
<select class=" custom-select text-capitalize">
  <option >Waakye </option>
  <option >Banku</option>
  <option >Plain Rice</option>
</select>
</div>
<br>
<!-- price -->
  <div >
    <span>Price</span>
    <input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " > 
    <!-- "min" above should be the value of the  starting price of the selected item  and placeholder strating price should be the value of the starting price of the selected item too-->
    </div>
  </div>
 </div>
<!-- end of card body -->
</div>
<br>
<div  class="addMoreContent" ></div>
<!-- onclick of add more,display the fiels here -->
<button  type="button" class="float-right btn btn-outline-dark btn-sm addMoreBtn">Add More</button> 
<br>

Answer 1

• С помощью $(".thenBuy") вы выбираете все элементы с именем класса thenBuy вам необходимо использовать .parent().find(".thenBuy")

• Чтобы позволить новому .IfNotAvailableSelectable вступают в силу после клонированного использования .IfNotAvailableSelectable

$(document).ready(function () {
  //clone
  var divContainer = $(".divContainer"),
      addMoreContent = $(".addMoreContent"),
      addMoreBtn = $(".addMoreBtn"),
      removeItem = $(".removeItem");
      
  addMoreBtn.click(function () {
    divContainer.clone(true).appendTo(addMoreContent);  
    addMoreContent.find(".IfNotAvailableSelectable").last().change();  //<<<<<<<<<< trigger the change event for the last/new IfNotAvailableSelectable
  });

  removeItem.click(function (e) {
    $(this).closest('div').remove();
    e.preventDefault();
  });
  
  //then buy functionO(when user selects "buy alternative")
  $(document).on('change', '.IfNotAvailableSelectable', function () {
    console.log($(this).val())
    var ThisSelect = $(this);  // define this
    var MainNav = ThisSelect.val();  // get this val
 
    if (MainNav == 0) {
      ThisSelect.parent().find(".thenBuy").show(); // use .parent().find
    } else {
      ThisSelect.parent().find(".thenBuy").hide(); // use .parent().find
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- card body-->
<div class="card-body bg-white divContainer" >
   <!-- delete button -->
<button type="button" class="close col-1 bg-white removeItem" >
          <span>×</span>
        </button>
  <!-- items -->
<select class=" custom-select text-capitalize">
  <option  >Waakye </option>
  <option >Banku</option>
  <option >Plain Rice</option>
</select>
<br>
<br>
<!-- price -->
  <div >
    <input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " > 
    <!-- "min" above should be the value of the  starting price of the selected item  and placeholder strating price should be the value of the starting price of the selected item too-->
    </div>
    <br>
<!-- if item is not available --> 
<div  style="font-size: medium;" >
<select  class="custom-select  text-capitalize IfNotAvailableSelectable">
  <option value="0" >If item is not available</option> 
  <option value="1" >Remove it from my order </option>
  <option value="2">Cancel entire order</option>
</select>
<br>
<!-- then buy -->
<div class="thenBuy"   >
<div>
 <span>Then Buy</span>
<select class=" custom-select text-capitalize">
  <option >Waakye </option>
  <option >Banku</option>
  <option >Plain Rice</option>
</select>
</div>
<br>
<!-- price -->
  <div >
    <span>Price</span>
    <input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " > 
    <!-- "min" above should be the value of the  starting price of the selected item  and placeholder strating price should be the value of the starting price of the selected item too-->
    </div>
  </div>
 </div>
<!-- end of card body -->
</div>
<br>
<div  class="addMoreContent" ></div>
<!-- onclick of add more,display the fiels here -->
<button  type="button" class="float-right btn btn-outline-dark btn-sm addMoreBtn">Add More</button> 
<br>