JSFiddle - React, Tailwind, and code Playground

HTML

<div class="extraPersonTemplate">
    <input class="span3" placeholder="First Name" type="text" name="firstname"> <a href="javascript:void(0)" class="addAttribute">Add Attribute</a>

    <div></div>
</div>
<div class="extraAttributeTemplate">
    <input class="span3" placeholder="Attribute" type="text" name="attribute">
</div>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>


</html>

JavaScript

$(document).ready(function () {
    $('#addRow').click(function () {
        $('<div/>', {
            'class': 'extraPerson',
            html: GetHtml()
        }).hide().appendTo('#container').slideDown('slow');
    });
    $(document).on('click', '.addAttribute', function () {
        $('<div/>', {
            'class': 'extraAttribute',
            html: GetHtml1()
        }).hide().appendTo($(this).next('div')).slideDown('slow');
    });
})

function GetHtml() {
    var len = $('.extraPerson').length;
    var $html = $('.extraPersonTemplate').clone();
    $html.find('[name=firstname]')[0].name = "firstname" + len;
    return $html.html();
}

function GetHtml1() {
    var len = $('.extraAttribute').length;
    var $html = $('.extraAttributeTemplate').clone();
    $html.find('[name=attribute]')[0].name = "attribute" + len;
    return $html.html();
}