Dynamically generate HTML control and change the ID attribute with jQuery in ASP.NET Core MVC

Question

I am creating an order item form in .NET Core MVC. There is add button in my form. Upon click the add button table row with some html controls are generated. The html of my form is below:

<div class="card">
            <div class="card-title"><h4>Order Information</h4></div>
            <div class="card-body">
                <table id="mytable" class="table">
                    <thead>
                        <tr>
                            <th>Item Name</th>
                            <th>Serial No</th>
                            <th>Quantity</th>
                            <th>Unit Price</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="extraPerson">
                            <td>
                                <select asp-for="OrderDtls[0].ItemName" class="form-control selItem"></select>
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].SerialNo" type="text" class="form-control" />
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].Quantity" type="number" class="form-control" />
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].Price" type="number" class="form-control" />
                            </td>
                            <td>
                                <a href="#" id="add">
                                    <i class="fa fa-plus" aria-hidden="true"></i>
                                </a>

                                <a href="#">
                                    <i class="fa fa-minus" aria-hidden="true"></i>
                                </a>
                            </td>
                        </tr>                            
                    </tbody>
                </table>
            </div>
        </div>

And the jQuery code to create html controls dynamically is below:

$(document).ready(function () {
        $("#add").click(function () {
            var html = $('#mytable tbody>tr:first').clone(true);            
            html.find('[class=selItem]').attr("id", "newIds");
            html.insertAfter('#mytable tbody>tr:last');

            return false;
        });
    });

Now in this code

html.find('[class=selItem]').attr("id", "newIds");

I would like to change the ID attribute with a new one. But it's not happening. Can anyone give me suggestion how to do this?

Answer 1

You use wrong class selector, change from

html.find('[class=selItem]').attr("id", "newIds");

to

html.find(".selItem").attr("id", "newIds");

 $(document).ready(function () { $("#add").click(function () { var html = $('#mytable tbody>tr:first').clone(true); html.find(".selItem").attr("id", "newIds"); html.insertAfter('#mytable tbody>tr:last'); return false; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-title"><h4>Order Information</h4></div> <div class="card-body"> <table id="mytable" class="table"> <thead> <tr> <th>Item Name</th> <th>Serial No</th> <th>Quantity</th> <th>Unit Price</th> <th></th> </tr> </thead> <tbody> <tr class="extraPerson"> <td> <select asp-for="OrderDtls[0].ItemName" class="form-control selItem"><option value="Test">Test</option></select> </td> <td> <input asp-for="OrderDtls[0].SerialNo" type="text" class="form-control" /> </td> <td> <input asp-for="OrderDtls[0].Quantity" type="number" class="form-control" /> </td> <td> <input asp-for="OrderDtls[0].Price" type="number" class="form-control" /> </td> <td> <a href="#" id="add">Add <i class="fa fa-plus" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-minus" aria-hidden="true"></i> </a> </td> </tr> </tbody> </table> </div> </div>