jQueryプラグイン「Select2」の複製が意図した挙動にならない

Question

jQueryプラグイン「Select2」を使用したフォームを制作しています。その中で、Select2を適用したセレクトボックスを動的に生成(追加)する場面がありました。
単純にappendするだけではだめだということが分かり、いくつかのサイトを参考に試してみました。
Select2が適用されたセレクトボックスの生成はできましたが、生成と同時に上のセレクトボックスのSelect2が解除されてしまいます。

<div class="form-category">
	<div class="form-select">
		<select id="box1" class="select2">
			<option></option>
			<?php
			foreach(データーベースから):
				p('
					<option data-id="$key">$value</option>
				');
			endforeach;
			?>
		</select>
	</div>
<input type="submit" id="form_add_select">
</div>

$(document).ready(function(){
	$('#form_add_select').on('click', function(){
		$clone = $(".form-select:first-child").clone(true);
  		$clone.find("span").remove();
  		$clone.find("select").select2();
  		$clone.appendTo(".form-category");
  		$("select").select2();
  		
  		
		$('.form-select select').each(function(i){
			$(this).attr('id','box' + (i+1));
		});
	});
	$('#form_del_member').on('click', function(){
		if($('.form-select').length != 1){
			$('.form-select:last-child').remove();
		}
	});
});

どうぞよろしくお願いいたします。
【参考にしたサイト】
AdminLTE3 select2を複数生成
[jQuery/Select2]動的なselectボックスにSelect2を適用する方法
jqueryプラグイン "select2" を使ったフォームを動的に追加（複製）すると上手く動かない。(teratail)

Answer 1

自己解決したので投稿します。

一番の問題点は、セレクトボックスに紐づけたIDが重複していることでした。Select2の仕様では、同じidを持つセレクトボックスがある場合後のボックスにのみselect2が適用されます。

質問のjsコードでは、セレクトボックスをクローン化してHTMLに挿入した後にIDを変更しているため、
id=1のボックスをクローン化
↓
id=1(クローン)にSelect2を適用
↓
id=1が二つある状態でHTMLに挿入
↓
id=1(クローン)のidを変更
という状態でした。

また、Select2を適用したセレクトボックスにはdata-select2-idという属性が付与されます。この属性が被っている場合でも後のボックスにのみSelect2が適用される形になります。

実際のコード

var i = $(".member-sel").length;
$clone = $(".form-select:first-child").clone(true);
$clone.find("span").remove();
$clone.find("select").attr('id','member' + (i+1));
$clone.find("select").attr('data-select2-id','member' + (i+1));
$clone.find("select").select2();
$clone.appendTo(".form-category");

Comments

[amon1020]

そもそもidは一つです