ダイナミックドロップダウンリストを作成してイベントを変更するにはどうすればよいですか？

Question

jQueryを使用して2つのドロップダウンリストを動的に作成し、イベントを変更するにはどうすればよいですか？

<script type="text/javascript"> 
 
    var counter = 0; 
 
    $("button").click(function() { 
 
     $("#div2").append("<select id='pincode' class='pincode' name='my_select_name'><option value='1'>1</option><option value='2'>2</option></select> <select id='pincode1' name='my_select_name1' class='pincode1'><option value='1'>1</option><option value='2'>2</option></select><br/>") 
 
    }); 
 

 
    $(document).on("click", ".pincode", function(){ 
 
     $('.pincode1').empty(); // alert($(this).text()); 
 
    }); 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <div id="div2"></div> 
 
</div> 
 
<button>generate new element</button>

EDIT：私はこの作業を行うためのdivと共通のクラス名を追加しました。

Answer 1

ここでは、私は、これはあなたが探しているものだと思いソリューションhttps://jsfiddle.net/woghjyd5/

var counter = 0; 
 

 
$("button").click(function() { 
 
    $("#div2").append("<select class='pincode' name='my_select_name'><option value='1'>1</option><option value='2'>2</option></select> <select name='my_select_name1' class='pincode1'><option value='1'>1</option><option value='2'>2</option></select><br/>") 
 
}); 
 

 

 

 
$(document).on("click", ".pincode", function(){ 
 
    $($(this).next()).empty(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
<div id="div2"></div> 
 
</div> 
 
<button>generate new element</button>

で行きます。