error in jquery code for adding html control dynamically

Here is my Html and jquery code for adding html control dynamically.Here my part of jquery code (that add No. of children control dynamically) works well.But the second part that add no. of infant doesn't work.What's the problem. Why the secong Dropdown list is not working.?????? need help

---------------------- First part--------------------------------------------

 <div class="grid_top "><b>
                   No. Of Children
                    <strong>
                    <% = Html.DropDownList("ddlNoOfChildren", new SelectList(new[] { "1", "2", "3", "4", "5", "6" }, ViewData["childs"]), new { id = "ddlNoOfChildren" })%>

                    </strong>

                </b></div>
            <div class="ledger_subtable create_tbl" style="margin:1px 0">
                <table id="Character"  width="100%">
                    <tr>
                        <th>
                            <label>
                                Mr/Mrs/Ms
                            </label>
                        </th>

                        <th>
                            <label>
                                Lastname
                            </label>
                        </th>
                        <th>
                            <label>
                                Firstname
                            </label>
                        </th>
                        <th>
                            <label>
                                Email Id
                            </label>
                        </th>
                        <th>
                            <label>Passport No</label>
                        </th>
                        <th>
                            <label>Nationality</label>
                        </th>
                    </tr>
                    <tr id="trow_0">
                        <td>
                            <% = Html.DropDownList("ddlSalts_0", new SelectList(new[] { "Mr", "Mrs", "Ms" }))%>
                        </td>
                        <td>
                            <%=Html.TextBox("LastName_0")%>
                          <%=Html.ValidationMessage("lastname","*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("FirstName_0")%>
                             <%=Html.ValidationMessage("firstname","*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("EmailId_0")%>
                             <%=Html.ValidationMessage("emailid","*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("PassportNo_0")%>
                            <%=Html.ValidationMessage("passportNo","*")%>
                        </td>

                        <td>
                            <% = Html.DropDownList("ddlNationality_",  new SelectList(new[] { "Nepali", "Foreigner" }), new { id = "ddlNationality_" })%>
                        </td>
                    </tr>
                </table></div>




   <%-- ----------------------- Second part -----------  --%>

 <div class="grid_top "><b>
                   No. Of Infant
                    <strong>
                    <% = Html.DropDownList("ddlNoOfInfants", new SelectList(new[] { "1", "2", "3", "4", "5", "6" }, ViewData["Infants"]), new { id = "ddlNoOfInfants" })%>

                    </strong>

                </b></div>
            <div class="ledger_subtable create_tbl" style="margin:1px 0">
                <table id="character2"  width="100%">
                    <tr>
                        <th>
                            <label>
                                Mr/Mrs/Ms
                            </label>
                        </th>

                        <th>
                            <label>
                                Lastname
                            </label>
                        </th>
                        <th>
                            <label>
                                Firstname
                            </label>
                        </th>
                        <th>
                            <label>
                                Email Id
                            </label>
                        </th>
                        <th>
                            <label>Passport No</label>
                        </th>
                        <th>
                            <label>Nationality</label>
                        </th>
                    </tr>
                    <tr id="trow2_0">
                        <td>
                            <% = Html.DropDownList("ddlSalts2_0", new SelectList(new[] { "Mr", "Mrs", "Ms" }))%>
                        </td>
                        <td>
                            <%=Html.TextBox("LastName2_0")%>
                          <%=Html.ValidationMessage("lastname", "*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("FirstName2_0")%>
                             <%=Html.ValidationMessage("firstname", "*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("EmailId2_0")%>
                             <%=Html.ValidationMessage("emailid", "*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("PassportNo2_0")%>
                            <%=Html.ValidationMessage("passportNo", "*")%>
                        </td>

                        <td>
                            <% = Html.DropDownList("ddlNationality2_", new SelectList(new[] { "Nepali", "Foreigner" }), new { id = "ddlNationality2_" })%>
                        </td>
                    </tr>
                </table></div>
   ----------------------------- Jquery -------------------------------------

 <script type="text/javascript">

     $(document).ready(function () {
         var flag = false;
         function removeDynamicallyCreatedRows() {
             var rowCount = $('#Character tr').length;
             for (var x = 1; x <= rowCount; x++) {
                 $('#trow_' + x).remove();
             }
         }
         function removeDynamicallyCreatedRows2() {
             var rowCount = $('#Character2 tr').length;
             for (var x = 1; x <= rowCount; x++) {
                 $('#trow2_' + x).remove();
             }
         }


         ///////////////////////////No of Infants/////////////////////////////

         $("#ddlNoOfChildren").change(function () {

             if (flag) {
                 removeDynamicallyCreatedRows();
             }
             flag = true;
             var self = $(this).val();
             //Keep the info for no of passengers that is added
             $("#noOfPassengers").val(self);

             var countChar = 0;

             $("[name=ddlSalts_]").attr("Name", "ddlSalts_" + countChar);
             $("[name=LastName_]").attr("Name", "LastName_" + countChar);
             $("[name=FirstName_]").attr("Name", "FirstN开发者_StackOverflow社区ame_" + countChar);
             $("[name=EmailId_]").attr("Name", "EmailId_" + countChar);
             $("[name=PassportNo_]").attr("Name", "PassportNo_" + countChar);
             $("[name=ddlNationality_]").attr("Name", "ddlNationality_" + countChar);

             $("[id=ddlSalts_]").attr("Id", "ddlSalts_" + countChar);
             $("[id=LastName_]").attr("Id", "LastName_" + countChar);
             $("[id=FirstName_]").attr("Id", "FirstName_" + countChar);
             $("[id=EmailId_]").attr("Id", "EmailId_" + countChar);
             $("[id=PassportNo_]").attr("Id", "PassportNo_" + countChar);
             $("[id=ddlNationality_]").attr("Id", "ddlNationality_" + countChar);

             for (var i = 1; i < self; i++) {
                 var newCharacter = '<tr id = "trow_' + i + '">'
                                            + '<td><select id = "ddlSalts_' + i + '" name="ddlSalts_' + i + '"><option value = "1">Mr</option><option value = "2">Mrs</option><option value= "3">Ms</option></select></td>'
                                            + '<td><input type = "text" name = "LastName_' + i + '" id = "LastName_' + i + '"></td>'
                                            + '<td><input type = "text"  name = "FirstName_' + i + '" id = "FirstName_' + i + '"></td>'
                                            + '<td><input type = "text" name = "EmailId_' + i + '" id = "EmailId_' + i + '"></td>'
                                            + '<td><input type = "text" name = "PassportNo_' + i + '" id = "PassportNo_' + i + '"></td>'
                                            + '<td><select id = "ddlNationality_' + i + '" name = "ddlNationality_' + i + '" ><option value = "1">Nepali</option><option value = "2">Foreigner</option></select></td>'
                                            +
                                           '</tr>'
                 $("#Character tr:last").after(newCharacter);
             }
             return;
         });



                     $("#ddlNoOfInfants").change(function () {

                        if (flag) {
                            removeDynamicallyCreatedRows2();
                        }
                        flag = true;
                        var self = $(this).val();
                        //Keep the info for no of passengers that is added
                        //$("#noOfPassengers").val(self);

                        var countChar = 0;

                        $("[name=ddlSalts2_]").attr("Name", "ddlSalts2_" + countChar);
                        $("[name=LastName2_]").attr("Name", "LastName2_" + countChar);
                        $("[name=FirstName2_]").attr("Name", "FirstName2_" + countChar);
                        $("[name=EmailId2_]").attr("Name", "EmailId2_" + countChar);
                        $("[name=PassportNo2_]").attr("Name", "PassportNo2_" + countChar);
                        $("[name=ddlNationality2_]").attr("Name", "ddlNationality2_" + countChar);

                        $("[id=ddlSalts2_]").attr("Id", "ddlSalts2_" + countChar);
                        $("[id=LastName2_]").attr("Id", "LastName2_" + countChar);
                        $("[id=FirstName2_]").attr("Id", "FirstName2_" + countChar);
                        $("[id=EmailId2_]").attr("Id", "EmailId2_" + countChar);
                        $("[id=PassportNo2_]").attr("Id", "PassportNo2_" + countChar);
                        $("[id=ddlNationality2_]").attr("Id", "ddlNationality2_" + countChar);

                        for (var i = 1; i < self; i++) {
                            var newCharacter = '<tr id = "trow2_' + i + '">'
                                            + '<td><select id = "ddlSalts2_' + i + '" name="ddlSalts2_' + i + '"><option value = "1">Mr</option><option value = "2">Mrs</option><option value= "3">Ms</option></select></td>'
                                            + '<td><input type = "text" name = "LastName2_' + i + '" id = "LastName2_' + i + '"></td>'
                                            + '<td><input type = "text"  name = "FirstName2_' + i + '" id = "FirstName2_' + i + '"></td>'
                                            + '<td><input type = "text" name = "EmailId2_' + i + '" id = "EmailId2_' + i + '"></td>'
                                            + '<td><input type = "text" nam e = "PassportNo2_' + i + '" id = "PassportNo2_' + i + '"></td>'
                                            + '<td><select id = "ddlNationality2_' + i + '" name = "ddlNationality2_' + i + '" ><option value = "1">Nepali</option><option value = "2">Foreigner</option></select></td>'
                                            +
                                           '</tr>'
                        $("#Character2 tr:last").after(newCharacter);

                        }
                        return;
                    });
     });



    </script>

your selector ("#Character") is an ID, jQuery only return one element when your selector is an ID. you should use tag name or class instead.