JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ew_ability_attributeComponents" data-prototype="<div class=&quot;form-group&quot;><label class=&quot;control-label required&quot;>__name__label__</label><div id=&quot;ew_ability_attributeComponents___name__&quot;><div class=&quot;form-group&quot;><label class=&quot;control-label&quot; for=&quot;ew_ability_attributeComponents___name___attribute&quot;>ew_ability.attributeComponents.labels.attribute</label><select id=&quot;ew_ability_attributeComponents___name___attribute&quot; name=&quot;ew_ability[attributeComponents][__name__][attribute]&quot; class=&quot;form-control&quot;><option value=&quot;&quot;></option><option value=&quot;1&quot;>Reflexes</option></select></div><div class=&quot;form-group&quot;><label class=&quot;control-label required&quot; for=&quot;ew_ability_attributeComponents___name___composition&quot;>ew_ability.attributeComponents.labels.composition</label><div class=&quot;input-group&quot;><input type=&quot;text&quot; id=&quot;ew_ability_attributeComponents___name___composition&quot; name=&quot;ew_ability[attributeComponents][__name__][composition]&quot; required=&quot;required&quot; class=&quot;form-control&quot;><span class=&quot;input-group-addon&quot;>%</span>
    </div></div></div></div>"></div>

JavaScript

$('[data-prototype]').each(function(i, element) {
    var prototype = $($(element).data('prototype'));
    prototype.find('label[for]').each(function(l, label) {
        var input = prototype.find('#' + $(label).attr('for'));
        $(label).text(input.attr('name').replace(/__name__/, 'labels').replace(/\[/g, '.').replace(/\]/g, ''));
    });
    // if you change this to `attr('data-prototype'` it works
    $(this).data('prototype', prototype[0].outerHTML);
});

var addAttributeLink = $('<a href="#" class="add-attribute-link">Add an attribute</a>');
var newLinkWrapper = $('<li></li>').append(addAttributeLink);

var addPrototype = function(collection, linkWrapper) {
    var prototype = collection.data('prototype');
    var index = collection.data('index');

    var newForm = prototype.replace(/__name__/g, index);
    collection.data('index', ++index);
    
    var formWrapper = $('<li></li>').append(newForm);
    newLinkWrapper.before(formWrapper);
};

var attributeCollection = $('#ew_ability_attributeComponents');
attributeCollection.data('index', attributeCollection.find(':input').length);
attributeCollection.append(newLinkWrapper);

addAttributeLink.on('click', function(e) {
    e.preventDefault();
    addPrototype(attributeCollection, newLinkWrapper);
});