jquery clone id update

jquery clone id update

by Thulasi Ram.S

HTML

<!--where you need to replace by cloneIndexLocation use ( collectionIndex ) word in there. it wiil replace it by number.-->
    <div id="clonedInputLocation0" class="clonedInputLocation" style="display: none;">
        <div class="formLocationWrapper">
            <label class="labelRadioBlack labelContainsInput" for="locationInNear0">
                <input name="locationInNearRadio[collectionIndex]" id="locationInNear0" value=""
                    type="radio" />
                In or near
            </label>
            <div class="inNearTextWrapper">
                <input class="myWirrlMediumFormField" type="text" name="txtLocationInNear[collectionIndex]"
                    value="" />
            </div>
        </div>
        <div class="formLocationWrapper">
            <label class="labelRadioBlack labelContainsInput" for="locationAnywhereIn0">
                <input name="locationInNearRadio[collectionIndex]" id="locationAnywhereIn0" value=""
                    type="radio" checked="checked" />
                Anywhere in
            </label>
        </div>
        <div class="" id="clonedInputLocationRemove0">
            <a href="javascript: void(0);">Remove location</a>
        </div>
    </div>
    <input type="button" id="btnAddAnotherLocation" value="AddAnotherLocation" />
    <div id="clonedInputsLocations">
    </div>

JavaScript

$(document).ready(function () {
            var cloneIndexLocation = 0;
            var clonedInputLocation = $('<div></div>').append($("#clonedInputLocation0").clone()).html();


            $("#btnAddAnotherLocation").live("click", function () {
                //cloneIndexLocation++;  //If u remove the locatoin then index has to be changed.

                //Or

                cloneIndexLocation = $('#clonedInputsLocations div').length;

                $(clonedInputLocation.replace(/collectionIndex/gi, cloneIndexLocation)).appendTo("#clonedInputsLocations");
                $('#clonedInputsLocations div').show();
            });
        });