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

我在这里有一些HTML:

            
            
            
            
            d

还有一点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 = $('');
          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($('', {
              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()以创建新的表行并添加带有从数组传递的选项的新选择.正如您从我的HTML标记中看到的那样,选择输入放在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++;
    });

会发生的是,如果我添加一个选择输入,并更改选项,那么事情就可以了.当我添加另一个并更改其选项时,它会获得第一个属性.添加更多 - 同样的事情.无论我改变什么,都需要添加第一个项目的属性值.