У меня есть форма, где я хочу иметь возможность дублировать группу полей столько раз, сколько я хочу. И я тоже хочу иметь полеid, nameи меткаfor атрибуты этой новой группы полей увеличиваются на 1. Я пробовал это до сих пор с jQuery и получил, по крайней мере, дублирование группы полей, но удаление не работает. И я не уверен, как сделать +1 для каждого из этих 3 атрибутов. Я ценю любую помощь, которую я могу получить.

Вот его пример, http://jsfiddle.net/Unfxn/

HTML

<form method="post" action="#" class="inlineForm" enctype="multipart/form-data">
    <div class="repeatingSection">
        <a href="#" class="buttonGray buttonRight deleteFight">Delete</a>
        <input type="hidden" name="fighter_a_id_1" id="fighter_a_id_1" value="" />
        <input type="hidden" name="fighter_b_id_1" id="fighter_b_id_1" value="" />
        <input type="hidden" name="winner_id_1" id="winner_id_1" value="" />
        <div class="formRow">
            <label for="fighter_a_1">Fighters</label>
            <input type="text" name="fighter_a_1" id="fighter_a_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_1" id="fighter_b_1" value="" />
        </div>
        <div class="formRow">
            <label for="fighter_a_pay_1">Fighter Pay 
<form method="post" action="#" class="inlineForm" enctype="multipart/form-data">
    <div class="repeatingSection">
        <a href="#" class="buttonGray buttonRight deleteFight">Delete</a>
        <input type="hidden" name="fighter_a_id_1" id="fighter_a_id_1" value="" />
        <input type="hidden" name="fighter_b_id_1" id="fighter_b_id_1" value="" />
        <input type="hidden" name="winner_id_1" id="winner_id_1" value="" />
        <div class="formRow">
            <label for="fighter_a_1">Fighters</label>
            <input type="text" name="fighter_a_1" id="fighter_a_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_1" id="fighter_b_1" value="" />
        </div>
        <div class="formRow">
            <label for="fighter_a_pay_1">Fighter Pay $</label>
            <input type="text" name="fighter_a_pay_1" id="fighter_a_pay_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_pay_1" id="fighter_b_pay_1" value="" />
        </div>
        <div class="formRow">
            <label for="winner_1">Winner</label>
            <input type="text" name="winner_1" id="winner_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_1">Method</label>
            <input type="text" name="method_1" id="method_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_type_1">Method Type</label>
            <input type="text" name="method_type_1" id="method_type_1" value="" />
        </div>
        <div class="formRow">
            <label for="round_1">Round</label>
            <input type="text" name="round_1" id="round_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="time_1">Time</label>
            <input type="text" name="time_1" id="time_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="fight_number_1">Fight #</label>
            <input type="text" name="fight_number_1" id="fight_number_1" class="fieldSmall" value="" />
        </div>
    </div>
    <div class="formRowRepeatingSection">
            <a href="#" class="buttonGray buttonRight addFight">Add Fight</a>
        </div>
    <div class="formRow">
        <input type="submit" class="submitButton" value="Save Fights" />
    </div>
</form>
lt;/label>
            <input type="text" name="fighter_a_pay_1" id="fighter_a_pay_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_pay_1" id="fighter_b_pay_1" value="" />
        </div>
        <div class="formRow">
            <label for="winner_1">Winner</label>
            <input type="text" name="winner_1" id="winner_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_1">Method</label>
            <input type="text" name="method_1" id="method_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_type_1">Method Type</label>
            <input type="text" name="method_type_1" id="method_type_1" value="" />
        </div>
        <div class="formRow">
            <label for="round_1">Round</label>
            <input type="text" name="round_1" id="round_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="time_1">Time</label>
            <input type="text" name="time_1" id="time_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="fight_number_1">Fight #</label>
            <input type="text" name="fight_number_1" id="fight_number_1" class="fieldSmall" value="" />
        </div>
    </div>
    <div class="formRowRepeatingSection">
            <a href="#" class="buttonGray buttonRight addFight">Add Fight</a>
        </div>
    <div class="formRow">
        <input type="submit" class="submitButton" value="Save Fights" />
    </div>
</form>

JS

// Add a new repeating section
$('.addFight').click(function(){
    var lastRepeatingGroup = $('.repeatingSection').last();
    lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup);
    return false;
});
// Delete a repeating section
$('.deleteFight').click(function(){
    $(this).parent('div').remove();
    return false;
});