Adding custom attribute values of dynamically created dropdowns to another element

Question

I have a bit of HTML here:

<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>

And a bit of JS here:

'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);
      });
    };

So what's actually going on here: I get my data from the URL (JSON array), trigger the addResourceFunction() on click to create a new table row and to add a new select with options passed from the array. As you see from my HTML markup, the select input is placed in td.get-resources, and all that works good. I get my date set, I populate the select field and all works good. I can add as many rows/select dropdowns as I want.

Also, every option has a few custom attributes (you can see it in my JS code above), and I want to add the values of those attributes to the second and third column of the row (in HTML those are span.resources-units and span.resources-quantity). The thing is, I have no clue how to make it work 1:1, meaning that one select dropdown "alters" only units and quantity of its own row. Below is the code for that:

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++;
    });

What happens is that if I add one select input, and change options, the thing works. When I add another one and change its options, it gets attributes of the first one. Adding more - same thing. Whatever I change, it takes the attribute value of the first item added.

Answer 1

Try getting the id from the element instead of from the variable, since you always update the element with the id of the counter, instead of the element with the id of the row that was clicked.

Hmm, what does the counter do exactly? The more I look at it, the less I understand. What I do know is that you're not selecting the correct elements by using the idCounter to reference the correct row.

You want to do something like

$(document).on('change', '.get-resources', function() {
    //var row = this;
    this.find(/* Some path to the second column */).att(/* some att to change */);
    this.find(/* Some path to the third column */).att(/* some att to change */);
});

where you always use the row as the root again, instead of finding a certain id, so you only update that row.

Native:

<table>
    <tr>
        <td>
            <select>
                <option data-text="resName1" data-resourceID="resID1" data-resourceUnit="resUnit1" data-resourceQuantity="resQuantity1">1</option>
                <option data-text="resName2" data-resourceID="resID2" data-resourceUnit="resUnit2" data-resourceQuantity="resQuantity2">2</option>
                <option data-text="resName3" data-resourceID="resID3" data-resourceUnit="resUnit3" data-resourceQuantity="resQuantity3">3</option>
            </select>
        </td>
        <td>
            <div class="column2"></div>
        </td>
        <td>
            <div class="column3"></div>
        </td>
    </tr>
</table>
<script>
document.addEventListener('change', function ( event ) {
    var select = event.target,
        option = select.options[select.selectedIndex],
        values = {
            'text' : option.getAttribute('data-text'),
            'resourceID' : option.getAttribute('data-resourceID'),
            'resourceUnit' : option.getAttribute('data-resourceUnit'),
            'resourceQuantity' : option.getAttribute('data-resourceQuantity')
        },
        row = select.parentNode.parentNode,/* depending on how deep the select is nested into the tr element */
        column2 = row.querySelector('.column2'),
        column3 = row.querySelector('.column3');
    column2.textContent = 'some string with the values you want';
    column3.textContent = 'some string with the other values you want';
});
</script>

Basically you start with the select that was changed, from there you get the option node that was clicked. Then you get the attributes you need from that option. Then you go up a few nodes to the row parent and find the two columns inside that row. Then you can set the content of these two columns.