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

June 2, 2022

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 class="form">
  <div class="record">
    <label>Country</label>
    <select class="country" id="country_1">
      <option disabled selected></option>
      <option value="germany">Germany</option>
      <option value="england">England</option>
    </select>
    <label>City</label>
    <select class="city" 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.

>Solution :

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 class="form">
  <div class="record">
    <label>Country</label>
    <select class="country" id="country_1">
      <option disabled selected></option>
      <option value="germany">Germany</option>
      <option value="england">England</option>
    </select>
    <label>City</label>
    <select class="city" id="city_1">
      <option disabled selected></option>
    </select>
  </div>
</form>
<button type="button" id="add_record">add</button>