html - How to pull the Incrementing id of the elements in the jquery

Question

The problem is when i try to pull the incrementing id's by using $("#[rowcount].Service_Line").change(function () { as the rown count goes ++ for every loop it's not working can any one please help so that i can populate the dropdowns from the database ** if i have a set of rows with id's like [1].Service_Line,[2].Service_Line,[3].Service_Line,.......then how can i get them in jquery using $ symbol.**

Here is the code as follows of html from the view source

 <table id="dataTable" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>UserName</th>
                <th>Password</th>
                <th>Service line</th>
                <th>Track</th>
                <th>subtrack</th>
                <th></th>
            </tr>

        </thead>
        <tbody>
            @if (Model != null && Model.Count > 0)
             {
                int j = 0;
                foreach (var i in Model)
                {
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td>@Html.TextBoxFor(a => a[j].UserName)</td>
                        <td>@Html.TextBoxFor(a => a[j].Password)</td>
                        <td>
                            @if (ViewBag.ServiceLineList != null)
                            {
                                @Html.DropDownListFor(a => a[j].Service_Line, ViewBag.ServiceLineList as SelectList, "--Select--", new { @id = "Service_Line", @class = "wrapper-dropdown Service_Line" })
                            }
                        </td>
                        <td>
                            @Html.DropDownListFor(a => a[j].Track, new SelectList(" "), "--Select--", new { @id="Track", @class = "wrapper-dropdown Track" })
                        </td>
                        <td>
                            @Html.DropDownListFor(a => a[j].Sub_Track, new SelectList(" "), "--Select--", new { @class = "wrapper-dropdown Sub_Track" })
                        </td>

                        <td>
                            @if (j > 0)
                            {
                                <a href="#" class="remove">Remove</a>
                            }
                        </td>
                    </tr>
                    j++;
                }
             }
        </tbody>
    </table>

The Jquery code is as follows

 $(document).ready(function () {
    /* 1. Initialise our variable to keep count of the rows added */
    var rowcount = 1;

    //Add new row
    $("#addNew").click(function (e) {
        e.preventDefault();
        var $tableBody = $("#dataTable");
        var $trLast = $tableBody.find("tr:last");

        // 2. Create the new id with the row count
        var newId = "TemplateRow-" + rowcount;

        // 3. clone the row with our new id
        var $trNew = $trLast.clone(true).prop({ id: newId });

        // 4. rename each input and give an id
        $.each($trNew.find(':input'), function (i, val) {

            oldName = $(this).attr('name');
            inputParts = oldName.split(".");

            // set the  name and id with the base name and rowcount
            $(this).attr('name', '[' + rowcount + '].' + inputParts[1]);
            $(this).attr('id', '[' + rowcount + '].' + inputParts[1]);

            $(this).removeClass("input-validation-error");
        });
        $("#[rowcount].Service_Line").change(function () {
            $.get("/Users/GetTrackList", { Service_Line_ID: $("#[rowcount].Service_Line").val() }, function (data) {
                $("#[rowcount].Track").empty();
                $.each(data, function (index, row) {
                    $("#[rowcount].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
                });
            });
        })

        $trLast.after($trNew);

        rowcount++;
    });
});

The problem is when i try to pull the id's of cloned row from the jquery using $("#[rowcount].Service_Line").change(function () { it's not working can any one please help

Answer 1

Notice how you use the variable rowcount in a string here:

'[' + rowcount + '].'

And notice how you try to use it in a string here:

"#[rowcount].Service_Line"

See the difference? In the latter example you're not actually using the rowcount variable, you just have a string which contains the literal text "rowcount". Use the variable just like you did in the former example:

"#[" + rowcount + "].Service_Line"

(Repeat this for any other places where you want to use a variable in a string.)

You may even be able to use the somewhat newer template literal syntax:

`#[${rowcount}].Service_Line`

(Note that the syntax highlighting here on Stack Overflow currently doesn't highlight this syntax correctly.)

But in either syntax, the key difference is between using the variable vs. just using a string with the name of the variable.