将动态创建的下拉列表的自定义属性值添加到另一个元素

我在这里有一点HTML：

<tr taskId="(#=obj.task.id#)" assigId="(#=obj.assig.id#)" class="assigEditRow" >
            <td><select name="resourceId" class="get-resources formElements"></select></td>
            <td><span class="resources-units"></span></td>
            <td><span class="resources-quantity"></span></td>
            <td><input type="text" placeholder="Required Q"></td>
            <td align="center"><span class="teamworkIcon delAssig" style="cursor: pointer">d</span></td>
</tr>

这里还有一点JS：

'use strict';
    function addResourceFunction(){
      let ResourcesJSON = (json) => {
        let Resources = json;
        console.log(Resources);
          let contactsLength = json.length;
          let arrayCounter = -1;
          let resID;
          let resName;
          let resUnit;
          let resQuantity;
          let Option = $('<option />');
          let assignedID = $('tr.assigEditRow:last').attr("assigId");
          while(arrayCounter <= contactsLength) {
            arrayCounter++;
            resID       = Resources[arrayCounter].ID;
            resName     = Resources[arrayCounter].name;
            resUnit     = Resources[arrayCounter].unit;
            resQuantity = Resources[arrayCounter].quantity;
            $('.assigEditRow').last().find('select').append($('<option>', {
              value: resName.toString(),
              text: resName.toString(),
              resourceID: resID.toString(),
              resourceUnit: resUnit.toString(),
              resourceQuantity: resQuantity.toString()
            }));
          }
      }
      $.getJSON("MY JSON URL IS HERE", function(json) {
        ResourcesJSON(json);
      });
    };

所以这里实际发生的事情是：我从URL（JSON数组）中获取数据，点击时触发addResourceFunction（）来创建一个新的表行，并添加一个带有从数组传递的选项的新select。正如您从我的HTML标记中看到的，select输入被放置在td.get-resources中，所有这些都很好。我设置了日期，填充了选择字段，一切都很好。我可以添加任意多的行/选择下拉列表。

此外，每个选项都有一些自定义属性（你可以在上面的JS代码中看到），我想把这些属性的值添加到行的第二列和第三列（在HTML中，它们是span.resources-units和span.resources quantity）。问题是，我不知道如何使其1:1工作，这意味着一个选择下拉列表只"改变"自己行的单位和数量。以下是代码：

let idCounter = 1;
    $(document).on('change', '.get-resources', function() {
      $('.assigEditRow').last().find('.resources-units').attr('id', 'units-' + idCounter);
      $('.assigEditRow').last().find('.resources-quantity').attr('id', 'quantity-' + idCounter);
      this.resourceUn = $( ".get-resources option:selected" ).attr( "resourceUnit" );
      this.resourceQuant = $( ".get-resources option:selected" ).attr( "resourceQuantity" );
      $('#units-' + idCounter).append(this.resourceUn);
      $('#quantity-' + idCounter).append(this.resourceQuant);
      idCounter++;
    });

结果是，如果我添加一个选择输入，并更改选项，事情就会成功。当我添加另一个并更改其选项时，它会获得第一个的属性。添加更多相同的东西。无论我更改什么，它都会采用添加的第一个项目的属性值。