How can i access the child element of a child element? is that possible?

Question

I'm having difficulties on my bulk save/add..

here's my code

<div id="contentMain">
    @using (Html.BeginForm("ClientCustomerPositionSkillSave", "Customer", FormMethod.Post, new { id = "clientcustomerPositionSkillForm" }))
    {
        <input type="hidden" id="clientCusPosSkillId" name="clientCusPosSkillId" value="" />
        <input type="hidden" id="clientCusPosId" name="clientCusPosId" value="@clientCusPosId" />
        <input type="hidden" id="clientCusId" name="clientCusId" value="@clientCusId" />
        <input type="hidden" id="clientId" name="clientId" value="@clientId" />

        <h2>
            Add Customer Position Skill</h2>
        <div class="main">

         <div id="optionBook1" class="clonedBook">
            <label for="txtSkillName1">
                <abbr title="Required">
                    <em><font color="red">*</font></em>
                </abbr>
                Skill Name
            </label>
                <input type="text" id="txtSkillName1" name="txtSkillName1" class="validate[required] inputLong"
                runat="server" />

                <p class="power"> 
                <label for="txtSkillLevel">
                    <abbr title="Required">
                        <em><font color="red">*</font></em>
                    </abbr>
                    Skill Level</label>
                <span>
                    <input type="text" id="txtSkillLevel1" name="txtSkillLevel1" class="validate[required] inputLong"
                        value="" />
                </span>
            </p>
            <p>
                <label for="txtSkillDescription">
                    <abbr title="Required">
                        <em><font color="red">*</font></em>
                    </abbr>
                    Skill Description</label>
                <span>
                    <textarea style="overflow: auto; resize: none" rows="3" cols="50" id="txtSkillDescription1"
                        name="txtSkillDescription1" class="validate[required] inputLong"></textarea>
                </span>
            </p>

            </div>
            <input type="button" id="btnAdd1" value="Add" />
                 <input type="button" id="btnDel1" value="Remove" />
        </div>
        <input type="submit" id="btnSave" class="styledButton" value="Save" />

here's my jquery

<script type="text/javascript">

    $(document).ready(function () {

        $('#btnAdd1').click(function () {

            var num = $('.clonedBook').length; // how many "duplicatable" input fields we currently have
            var newNum = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#optionBook' + num).clone().attr('id', 'optionBook' + newNum);


            // manipulate the name/id values of the input inside the new element
            newElem.children(':nth-child(10n-8)').attr('id', 'txtSkillName' + newNum).attr('txtSkillName', 'txtSkillName' + newNum);


            newElem.children(':nth-child(10n-4):nth-child(10n-8):first').attr('id', 'txtSkillDescription' + newNum).attr('txtSkillDescription', 'txtSkillDescription' + newNum);

            // insert the new element after the last "duplicatable" input field
            $('#optionBook' + num).after(newElem);
            //            $('#apn-book' + num).after(newElem);

            // enable the "remove" button
            $('#btnDel1').attr('disabled', '');

            // business rule: you can only add 5 names
            if (newNum == 5)
                $('#btnAdd1').attr('disabled', 'disabled');


        });



        })
        $('#btnDel1').click(function () {
            var num = $('.clonedBook').length; // how many "duplicatable" input fields we currently have
            $('#optionBook' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd1').attr('disabled', '');

            // if only one element remains, disable the "remove" button
            if (num - 1 == 1)
                $('#btnDel1').attr('disabled', 'disabled');
        });

    });


</script>

What I'm trying to do here is when Add button is click the div is cloned along with its elements, and the textboxes inside the div will the different id's based on the clone, example (txtSkillName1,txtSkillName2 so on).. the text box of the txtSkillName is working but I'm having problem with txtSkillLevel1 and txtSkillDescription1.

Answer 1

See this demo. I think it does what you're trying to accomplish. However you will have to change the code to make it fit your needs, I've only done up to one clone.

http://jsfiddle.net/vj9RD/4/

$('#btnAdd1').click(function () {

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#optionBook1').clone().attr('id', 'optionBook2');


    // manipulate the name/id values of the input inside the new element
    $(newElem).find('[id=txtSkillName1]').attr('name', 'txtSkillName2');    
    $(newElem).find('[id=txtSkillName1]').attr('id', 'txtSkillName2');

    $(newElem).find('[id=txtSkillLevel1]').attr('name', 'txtSkillLevel2');    
    $(newElem).find('[id=txtSkillLevel1]').attr('id', 'txtSkillLevel2');

    $(newElem).find('[id=txtSkillDescription1]').attr('name', 'txtSkillDescription2');    
    $(newElem).find('[id=txtSkillDescription1]').attr('id', 'txtSkillDescription2');

    // insert the new element after the last "duplicatable" input field
    $(newElem).insertAfter('#optionBook1');


});

Make sure to change the name attribute first!