javascript - 一番上のドロップダウンだけが正しく入力されています。他のドロップダウンでも同じ機能が必要

Question

私の目標は、ボタンのクリック時にドロップダウンを追加することです。最初のドロップダウンでは、サブドロップダウンを選択できます。それは正しく動作しています。しかし、別のドロップダウンを追加すると失敗します。最初のドロップダウンとまったく同じ機能を持つ別のドロップドロップを追加する追加ボタン。

ここに私のコードがあります:

HTML

<div class="mydropdown">
    <div id="dropdown"
        <label for="xyz" >xyz</label>
            <select id="id_xyz" name="xyz_id">
                            <option>--Select -</option>
                              <option value="v1">op1</option>
                                <option value="v2">op2</option>
                        </select>

                    <select id="v1" name="t1" style="display:none" class="sub_content"> 
                        <option>-Sub1-</option>
                         <option>option2</option>
                         <option>option3</option>
                         <option>option4</option>
                    </select>
                    <select id="v2" name="t2" style="display:none" class="sub_content"> 
                        <option>-Sub2-</option>
                        <option>option1</option>
                         <option>option2</option>
                         <option>option3</option>
                         <option>option4</option>
                    </select>

                        <button class="add_button" id="add">Add </button>
                        <button class="add_button" id="remove" style="display:none;">remove </button>

    </div>
    </div>

Javascript:

    $(document).ready(function(){
                $("#id_xyz").change(function(){
                var v = $(this).val();
                var y = $("#"+v);
                if (v != ''){
                $('.sub_content').hide();
                 y.show();
                 }

                });
            }); 

        $(document).ready(function(){
                var counter =2;
                $("#add").click(function(e){
                e.preventDefault();
                var $newdiv = $('#dropdown').clone();
                var newvert =        $(document.createElement('div')).after("id", 'dropdown' + counter);
                $('div.mydropdown').append($newdiv);
                $("#remove").show();
                });
            }); 

jsfiddle へのリンクは次のとおりです: http://jsfiddle.net/deerups/HQUMF/