I'm trying to clone an element and increment a counter. It's working well, except for this curiosity.
I think this code should update the data attribute in the source, but it doesn't. I've tried a few variations of the data tag: data('position-id')
data("positionid")
data('positionId')
- and others.
I can get it to work with attr, but I would like to know why the source isn't being updated with the data attribute. Also when I get the value from the cloned element, it's correctly incremented, but it just doesn't show up in source.
The markup:
<div class="row layout-position" data-position-id="0">
...
and the relevant part of the js
var clone = $position.clone();
var expression = 'layoutPositionList\\[' + currentId + '\\]';
var expression2 = 'layoutPositionList' + currentId;
var replacement = 'layoutPositionList[' + nextId + ']';
var replacement2 = 'layoutPositionList' + nextId;
var regex= new RegExp(expression, "g");
var regex2= new RegExp(expression2, "g");
var newHtml = clone.html().replace(regex, replacement);
newHtml = newHtml.replace(regex2, replacement2);
clone.html(newHtml);
clone.find('input').val('');
console.debug(clone);
$position.after(clone);
$position.after('<hr />');
// this works
//$(clone).attr("data-position-id", nextId);
// this doesn't
$(clone).data("position-id", nextId);