JSFiddle - React, Tailwind, and code Playground

by Artur Soul

HTML

<div class="repeat-role">
     <h3>Current Role</h3>

    <label for="primaryJobRole">Job Role:</label>
    <input id="primaryJobRole" name="primaryJobRole" type="text">
    <label for="currentOrganisation">Current Organisation Name:</label>
    <input id="currentOrganisation" name="currentOrganisation" type="text">
    <label for="currentTitle">Current Title:</label>
    <input id="currentTitle" name="currentTitle" type="text">
<a href class="add-role">Add another role</a>

</div>

JavaScript

$(document).on('click', '.add-role', function () {
    var curuirentCount = $('.repeat-role').length;
    var newCount = currentCount + 1;
    var lastRepeatingGroup = $('.repeat-role').last();
    var template = $('.repeat-role').first();
    var newSection = template.clone();
    var newHeading = $('h3', newSection).append(' ' + newCount);

    lastRepeatingGroup.removeClass('current-role');
    newSection.insertAfter(lastRepeatingGroup).hide().addClass('current-role new-role').slideDown(1000);
    newSection.find("input").each(function (index, input) {
        var i = $(this).attr('id');
        $(this).attr('id', i + newCount);
    });
    newSection.find("label").each(function (index, label) {
        var l = $(this);
        l.attr('for', l.attr('for') + newCount);
    });
    return false;
});