jQuery克隆select选项时首个克隆元素id自增失效问题

你的代码逻辑存在操作对象错位的问题：

• 页面初始化时你把第一组.record克隆存为$duplicate作为新增模板，这个逻辑本身没问题。
• 点击新增按钮时，你先把$duplicate的克隆体直接追加到表单，之后修改id的操作却是直接作用在存为模板的$duplicate变量本身，而非刚追加到页面的新节点。
• 第一次点击时，追加到页面的新节点id还是初始的_1，和原有第一组节点id重复；这一步操作结束后，模板$duplicate里的id才被改成_2。
• 第二次及之后点击时，你克隆的模板已经是上次修改过id的版本，追加后又会把模板本身的id继续+1，所以看起来后续新增的节点id递增正常，只有第一次新增的节点id不生效。

核心原则是 永远不要修改作为模板存储的原始克隆节点：每次新增时先从固定模板克隆出新节点，完成id修改、值清空操作后，再把处理好的新节点追加到表单中。
修复后的完整JS代码如下：

// 初始化时固定模板，全程不修改这个模板对象
var $duplicate = $('.record').first().clone(true);
var $form = $('.form');
var count = 1;

$('#add_record').click(function() {
  count += 1;
  // 先从模板克隆得到新的记录节点
  var $newItem = $duplicate.clone();
  // 仅修改新节点的id、清空值，不改动原始模板
  $newItem.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($newItem);
})

// 国家城市级联逻辑无需改动
$('.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>");
  }
});

对应的HTML结构无需调整，修复后所有新增节点的id都会从_2开始逐次正常递增，不会再出现第一次新增id重复的问题。

内容的提问来源于stack exchange，提问作者Reinardus Hans