เติมกล่องเลือกในการเลือกก่อนหน้าและด้วยโคลน

ฉันกำลังพยายามเพิ่มฟังก์ชันการโคลนสำหรับกล่องที่เลือก ฉันมีกล่องเลือก 3 ช่อง: ประเทศ รัฐ เมือง และผู้ใช้รายแรกเลือกประเทศ และกล่องเลือกสถานะตามรหัสจะเต็มไปด้วยตัวเลือกต่างๆ และแบบเดียวกับเมืองแบบเลื่อนลงจะเติมเฉพาะเมื่อมีการเลือกรัฐเท่านั้น

จากนั้นฉันก็ได้เพิ่มตัวเลือกเพิ่มเติมโดยที่ฉันสร้างทุกอย่างขึ้นมาใหม่ ดังนั้นฉันจึงโคลน div ของฉัน แต่ปัญหาเมื่อฉันเปลี่ยนประเทศแทนที่จะแสดงสถานะใหม่แบบเลื่อนลง กลับไปสู่แบบเลื่อนลงก่อนหน้า:

  $('.country').on('change',function(){
        var id = $(this).val();
        callAjax(id);
    });
    $('.state').on('change',function(){
        var id = $(this).val();
        callAjax(id);
    });

  $('#btClone').on('click', function () {

        $('#country')
            .clone()
            .attr('id', 'country_' + i)
            .attr('name', 'country_' + i)
            .appendTo("#container2");
        $('#state')
            .clone()
            .attr('id', 'state_' + i)
            .attr('name', 'state_' + i)
            .appendTo("#container2");
      i =i+1;
    });

Html ของฉันดูเหมือนว่า

 <div id="container1">
                <select id="country" name="country" class="hidden country">
                </select>
                <select id="state" name="state" class="hidden state">
                </select>
                <select id="city" name="city" class="hidden city">
                </select>
             <span id="selected-profile"></span>
             <div id="addons" class="hidden">

                <input type="button" id="btClone" value="Clone the list" style="float:right;" />
             </div>
         </div>
        <div id="container2" style="display:none;"></div>

ฉันต้องการเมื่อฉันคลิกเพิ่มใหม่ จากนั้นเลือกประเทศ แล้วเปลี่ยนสิ่งที่โทร ajax ของฉันโทรอีกครั้ง แต่ ณ ตอนนี้ฉันไม่สามารถทำเช่นนั้นได้เพราะฉันมีตัวเลือกอยู่แล้ว