populate select box on previous select and with clone

Question

I am trying to add cloning functionality for select boxes. I have 3 select box: country, state, city and first user select the country and on id basis state select box is populated with options and same with city dropdown will populate only when state is selected.

Then I have add more option where I have regenerate everything. so I am cloning my div but the problem when I change my country instead of showing new state dropdown its returns to previous drop down:

  $('.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;
    });

My Html looks like

 <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>

I want when i click on add new then chose country then change something my ajax call again call but as of now i am unable to do that because i already have options

Answer 1

what exactly do you mean with "instead of showing new state dropdown its returns to previous drop down". I tried your code in a fiddle and it's cloning as expected.

function initRow($row){
  $row.find('select[name="country"]').on('change', function () {
      var thisRow = $(this).closest('div.row');
      var stateDD = thisRow.find($('select[name="state"]'));
      stateDD.show();

      stateDD.on('change',function(){
        var cityDD = thisRow.find('select[name="city"]');
        cityDD.show();
        cityDD.on('change',function(){

        });
      });
  });
}
$('#container1 .row').each(function(){
	initRow($(this));
});
$('#btClone').click(function(){
	var rowTemplate = $('#container1 > .row').eq(0).clone();
  rowTemplate.find('select[name="state"]').hide();
  rowTemplate.find('select[name="city"]').hide();
	initRow(rowTemplate.appendTo($('#container1')));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1">
  <div class="row">
    <select name="country" class="hidden country">
      <option value=1>country 1</option> <option value=2>country 2</option>
    </select>
    <select name="state" class="hidden state" style="display:none;">
      <option value=1>state 1</option> <option value=2>state 2</option>
    </select>
    <select name="city" class="hidden city" style="display:none;">
       <option value=1>city 1</option> <option value=2>city 2</option>
    </select>
  </div>
</div>
<input type="button" id="btClone" value="Clone the list" style="float:right;" />