如何在 jQuery 中创建动态 ID

我正在创建一个表单，在其中生成动态字段。

1. 在该动态字段上，我有一个选择选项。 在该选项中，有两个选项可用于给出尺寸，一个是适合/英寸，另一个是米/厘米的尺寸

2. 如果我选择适合，那么尺寸将以英尺为单位。 否则以 m/cm 为单位，代码工作正常

3. 但问题是，当我创建像 5 次这样的动态字段时，如果我选择一个只发生更改，那么在那个时候会有 5 个选项。

4. 在一个字段中选项中，我知道原因，因为所有动态 id 的 id 相同，然后我可以为该选择选项创建动态 id。
5. 下面是动态生成字段意味着如果选择五次，它创建 5 个动态字段我知道它非常广泛地描述我的问题，但我需要解决

$(document).ready(function() {
  var count = 0;
  $("#sel").on('change', function() {
    var counter = parseInt(this.value, 10);
    $('#parent').change('<div id="first' + count + '">text</div>');
    var html = '<div class="form-group"><label class="col-sm-9 control-label"><h3><strong>Item Details</strong></h3></label></div>';
    var html1 = '<div class="row"><div class="form-group"> <label for="inputEmail3" class="col-sm-6 control-label">* Dimensions (Best Estimate):</label> <div class="col-sm-3"><select id="mySelect" class="form-control"><option>ft/in/lbs</option><option>m/cm/kg</option></select></div>'
  </div></div><br>';
    var html2 = '<div style="padding-left: 4cm;"><div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Length<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="length_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="length_md" id="myInput1" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="length_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="length_cmd" id="myInput2" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>'
      </div>';
    var html3 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Width<?php echo str_repeat(' & nbsp ', 8);?></span><div class="input-group-addon"><input type="text" name="width_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="width_md" id="myInput3" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="width_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="width_cmd" id="myInput4" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>'
      </div>';
    var html4 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Height<?php echo str_repeat(' & nbsp ', 7);?></span><div class="input-group-addon"><input type="text" name="height_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="height_md" id="myInput5" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="height_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="height_cmd" id="myInput6" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>'
      </div>';
    var html5 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Weight<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="weight" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="weightd" id="myInput7" value="lbs" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Quantity&nbsp;&nbsp;</span><div class="input-group-addon"><input type="text" name="quantity" id="myInput" placeholder="" maxlength="2" size="2" aria-describedby="basic-addon1" required></div>'
      </div></div></br></br>';
    var html6 = '<div class="form-group"><label for="inputEmail3" class="col-sm-6 control-label">Item description</label><div style="padding-left: 4cm;"><textarea class="form-control" rows="5" id="comment" name="additional_detail" placeholder="Item description"></textarea></div>'
      </div></br></br></br>';
    count++;
    var str1 = "";
    for (var i = 1; i < counter; i++) {
      str1 += [html, html1, html2, html3, html4, html5, html6];
      str1 = str1.replace(/,/gi, "'n").replace(/^,/, "");
    }
    $("#inrlog").empty().append(str1);
  })
});

上选择选项ID的代码，它更改了该字段两个不同的值，一个在英尺/英寸，另一个在M/CM中

$('#mySelect').on('change', function() {
  var value = $(this).find(':selected').data('value');
  var value1 = $(this).find(':selected').data('value1');
  var value2 = $(this).find(':selected').data('value2');
  $('#myInput1').attr('value', value);
  $('#myInput2').attr('value', value1);
  $('#myInput3').attr('value', value);
  $('#myInput4').attr('value', value1);
  $('#myInput5').attr('value', value);
  $('#myInput6').attr('value', value1);
  $('#myInput7').attr('value', value2);
});