JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <legend>Attributes</legend>

    <div class="attr_container">
        <div class="attr_entry existent row">
            <div class="half">
                <label for="attribute[]">Attribute</label>
                <input id="attribute" maxlength="50" required="required" name="attribute[]" type="text">                
                <p>
                    <a href="javascript:void(0)" class="add_attr"><i class="fa fa-plus-circle"></i> Add Another Attribute</a> 
                    <span class="remove">| 
                    <a href="javascript:void(0)" class="remove_attr"><i class="fa fa-minus-circle"></i> Remove</a></span>
                </p>
            </div>
            <div class="half">
                <label for="designator">Is this attribute a designator?</label>             <input checked="checked" name="designator[0]" type="radio" value="0" id="designator[0]"> No
                <input name="designator[0]" type="radio" value="1" id="designator[]"> Yes
            </div>
        </div>
    </div>

</fieldset>

JavaScript

$('.add_attr').click(function() {
    var newIndex = $('.attr_entry').length;
    $( ".attr_entry:first" ).clone(true).removeClass('existent').insertAfter( ".attr_entry:last" ).find('input[type="radio"]').prop('name', 'designator['+newIndex+']');
});

    $('.remove_attr').click(function() {
        // remove entry
        if($(this).parents('.attr_entry').first().hasClass('existent')) {
            alert('You can not remove the first attribute entry.');
        } else {
            $(this).parents(".attr_entry").first().remove();
        }
    });