Html, cloning select option with increment id doesn't work on first clone-CodePudding

I have html and jquery code example of dependent select option country and city with button to duplicate more select option like this :

var $duplicate = $('.record').first().clone(true);
var $form = $('.form');
var count = 1;

$('#add_record').click(function() {
  count  = 1;
  $form.append($duplicate.clone());
  $($duplicate).find("*[id]").each(function() {
    $(this).val('');
    var tID = $(this).attr("id");
    var idArray = tID.split("_");
    var idArrayLength = idArray.length;
    var newId = tID.replace(idArray[idArrayLength - 1], count);
    $(this).attr('id', newId);
  });
})

$('.form').on('change', '.country', function() {
  var val = $(this).val();
  var $city = $(this).closest('.record').find('.city');
  if (val == "germany") {
    $city.html("<option>Berlin</option> <option>Munich</option>");
  } else if (val == "england") {
    $city.html("<option>London</option> <option>Manchester</option>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
  <div >
    <label>Country</label>
    <select  id="country_1">
      <option disabled selected></option>
      <option value="germany">Germany</option>
      <option value="england">England</option>
    </select>
    <label>City</label>
    <select  id="city_1">
      <option disabled selected></option>
    </select>
  </div>
</form>
<button type="button" id="add_record">add</button>

In the jquery cloned select option have different id increment by 1, but only the first cloned element the increment id doesn't work the rest is fine. Can you help what am I missing? Thank you.

CodePudding user response：

You should increment the IDs in $(duplicate) before you clone it. Otherwise, the first duplicate has the same IDs as the original record that you cloned it from.

var $duplicate = $('.record').first().clone(true);
var $form = $('.form');
var count = 1;

$('#add_record').click(function() {
  count  = 1;
  $($duplicate).find("*[id]").each(function() {
    $(this).val('');
    var tID = $(this).attr("id");
    var idArray = tID.split("_");
    var idArrayLength = idArray.length;
    var newId = tID.replace(idArray[idArrayLength - 1], count);
    $(this).attr('id', newId);
  });
  $form.append($duplicate.clone());
})

$('.form').on('change', '.country', function() {
  var val = $(this).val();
  var $city = $(this).closest('.record').find('.city');
  if (val == "germany") {
    $city.html("<option>Berlin</option> <option>Munich</option>");
  } else if (val == "england") {
    $city.html("<option>London</option> <option>Manchester</option>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
  <div >
    <label>Country</label>
    <select  id="country_1">
      <option disabled selected></option>
      <option value="germany">Germany</option>
      <option value="england">England</option>
    </select>
    <label>City</label>
    <select  id="city_1">
      <option disabled selected></option>
    </select>
  </div>
</form>
<button type="button" id="add_record">add</button>