Change name of radio button upon jquery clone()

Question

Right here is my 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>

Here is my jQuery:

    $('.add_attr').click(function() {
        // clone and add
        $( ".attr_entry:first" ).clone(true).removeClass('existent').insertAfter( ".attr_entry:last" );
    });

    $('.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();
        }
    });

So when I clone this, I want to know how to change the name attribute to designator[1] .. so adding one to that. I'm not sure how to do that while still cloning and inserting after the last appended clone.

Here is the HTML I referenced to figure out how to accept array of radio buttons:

Radio buttons + array elements

Because I need to know the attribute which I can do in my PHP for loop and grab the right designator that belongs to it.

Thanks for any help!

Answer 1

You can get the new index by assessing how many $('.attr_entry') elements exist. Then, you can combine find() and prop() to set the name of the radio buttons.

Amend your clone() line as follows:

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

jsFiddle Demo

Please also be advised that the id attribute for elements should be unique, so you might want to consider updating that at the same time (using the same prop() method).

Answer 2

Not overly familiar with clone in jquery You can set attributes using the attr() function.

So your code would look something like this:

var designatorIndex = 0;
$('.add_attr').click(function() {
    // clone and add

    var myVar = $( ".attr_entry:first" ).clone(true).removeClass('existent');

    $(myVar).attr('name', 'designator' + designatorIndex );
    $(myVar).id('designator' + designatorIndex);
    designatorIndex++;
    $(myVar).insertAfter( ".attr_entry:last" );
});