Краткое описание скрипта: когда пользователь выбирает пункты в select - добавляется под селектом дополнительные блоки, а когда пользователь обратно удаляет выбранный пункт из select (multiple), то соответствующий блок удаляется.
На странице есть несколько одинаковых форм:
<form class="myform">
<select name="myselect" multiple>
<option value="1">my option</option>
<option value="2">my option</option>
<option value="3">my option</option>
</select>
<div class="myblock"></div>
</form>
<form class="myform">
<select name="myselect">
<option value="1">my option</option>
<option value="2">my option</option>
<option value="3">my option</option>
</select>
<div class="myblock"></div>
</form>
Скрипт, который работает с формой выше:
<script>
$('.myform').each(function(index, value){
let $this = $(this);
// Читаем событие, когда пункт был выбран, тогда добавляем в .myblock блоки
$this.find('select').select2().on("select2:select", function (e) {
$this.find('.myblock').append('<div id="div'+e.params.data.id+'"></div>');
});
// Читаем событие, когда пункт был удален, удалем див соответствующий пункту
$this.find('select').select2().on("select2:unselect", function (e) {
$this.find('.myblock #div'+e.params.data.id).remove();
});
});
</script>
$('.myform').each() находит две формы - при событии select2:select и select2:unselect блоки добавляются и удаляются только в первой форме, даже если действия происходят в других формах на странице..
Пробовал использовать в обращении к объектам .eq(index) - тоже не помогает.
Как решить задачу?)
