Why can't I update a data attribute I'm iterating over in jQuery?

Question

I have this fiddle https://jsfiddle.net/3azcbye3/2/ that shows the exact scenario I've encountered.

I want to know why when I do a $('[data-prototype]').each I can't update the data attribute with $(this).data('prototype', value) but instead need to utilize $(this).attr('data-prototype', value).

When a click event later grabs the prototype with .data('prototype') it's as if it grabs the DOM value rather than the value that should be updated in the jQuery local variable. As far as I understood .attr vs .data I would have expected the inverse between the two.

Edit: After implementing a simplified version of the event piece in the fiddle, it appears to work as expected. There must be something in my other libs causing a conflict.

Answer 1

Both codes returns the same result

This :

$('[data-prototype]').each(function(i, element) {
    var prototype = $($(element).data('prototype'));
    prototype.find('label').each(function(l, label) {
      $(label).text('****'); //removed code for clarity
    });


    $(this).data('prototype', prototype[0].outerHTML);
    console.log( $(this).data('prototype'))
    });

Yields :

<div class="form-group"><label class="control-label required">****</label><div id="ew_ability_attributeComponents___name__"><div class="form-group"><label class="control-label" for="ew_ability_attributeComponents___name___attribute">****</label><select id="ew_ability_attributeComponents___name___attribute" name="ew_ability[attributeComponents][__name__][attribute]" class="form-control"><option value=""></option><option value="1">Reflexes</option></select></div><div class="form-group"><label class="control-label required" for="ew_ability_attributeComponents___name___composition">****</label><div class="input-group"><input type="text" id="ew_ability_attributeComponents___name___composition" name="ew_ability[attributeComponents][__name__][composition]" required="required" class="form-control"><span class="input-group-addon">%</span>
    </div></div></div></div>

And this code :

$('[data-prototype]').each(function(i, element) {
    var prototype = $($(element).data('prototype'));
    prototype.find('label').each(function(l, label) {
      $(label).text('****');
    });

    $(this).attr('data-prototype', prototype[0].outerHTML);
    console.log( $(this).attr('data-prototype'))
    });

Yields :

<div class="form-group"><label class="control-label required">****</label><div id="ew_ability_attributeComponents___name__"><div class="form-group"><label class="control-label" for="ew_ability_attributeComponents___name___attribute">****</label><select id="ew_ability_attributeComponents___name___attribute" name="ew_ability[attributeComponents][__name__][attribute]" class="form-control"><option value=""></option><option value="1">Reflexes</option></select></div><div class="form-group"><label class="control-label required" for="ew_ability_attributeComponents___name___composition">****</label><div class="input-group"><input type="text" id="ew_ability_attributeComponents___name___composition" name="ew_ability[attributeComponents][__name__][composition]" required="required" class="form-control"><span class="input-group-addon">%</span>
    </div></div></div></div>

Taking the results to beyond compare , both are identical :