在表单中，我有一个select选项，每个选项都有data属性.
在change上，我从所选选项获得值data-size，并填充邻居的输入.这个很好用.
现在，我添加了一个加号按钮，它克隆行，这也很好用.
然而，当我(从克隆的行中) Select 一个选项时，var row = $(this).data("row");总是返回1，它属于第一行.因此，每次它都会更新第一行输入，而不是其邻居的输入.
我错过了什么吗？
var counter = 1;
$('#myform')
.on('click', '.addInput', function(e) {
e.preventDefault();
counter++;
var $template = $('.copy-row').slice(-1).clone(true, true).find('input').end()
.find('.addInput').removeClass('addInput').addClass('removeInput').text('-').end()
.find('[name^="cloth-"]').attr('name', 'cloth-' + counter).attr('tabindex', counter).val(null).attr('data-row', counter).end()
.find('[name^="size-"]').attr('name', 'size-' + counter).attr('tabindex', counter).val("").end()
$template.insertAfter('.copy-row:last');
$('.copy-row:last').focus();
})
// Remove button click handler
.on('click', '.removeInput', function(e) {
e.preventDefault();
var $row = $('.copy-row').slice(-1);
counter--;
$row.remove();
});
$('#myform')
.on('change', '.getclothsize', function(e) {
var size = $(this).find('option:selected').data("size");
var row = $(this).data("row");
console.log("size " + size + " from row = " + row);
if (size != null) {
$("input[name='size-" + row + "']").val(size);
}
});<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<form id="myform">
<div class="form-row copy-row mb-3">
<div class="form-group col-3">
<select name="cloth-1" data-row="1" class="custom-select getclothsize">
<option></option>
<option value="option1" data-size="M">option1</option>
<option value="option2" data-size="L">option2</option>
</select>
</div>
<div class="form-group col-2">
<input name="size-1" type="text" class="form-control">
</div>
<div class="form-group col-2">
<button class="btn btn-primary addInput">+</button>
</div>
</div>
</form>