title: Dynamically generate HTML control and change the ID attribute with jQuery in ASP.NET Core MVC
body: <p>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:</p>
  
  <pre><code>&lt;div class="card"&gt;
              &lt;div class="card-title"&gt;&lt;h4&gt;Order Information&lt;/h4&gt;&lt;/div&gt;
              &lt;div class="card-body"&gt;
                  &lt;table id="mytable" class="table"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Item Name&lt;/th&gt;
                              &lt;th&gt;Serial No&lt;/th&gt;
                              &lt;th&gt;Quantity&lt;/th&gt;
                              &lt;th&gt;Unit Price&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr class="extraPerson"&gt;
                              &lt;td&gt;
                                  &lt;select asp-for="OrderDtls[0].ItemName" class="form-control selItem"&gt;&lt;/select&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input asp-for="OrderDtls[0].SerialNo" type="text" class="form-control" /&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input asp-for="OrderDtls[0].Quantity" type="number" class="form-control" /&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input asp-for="OrderDtls[0].Price" type="number" class="form-control" /&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;a href="#" id="add"&gt;
                                      &lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
  
                                  &lt;a href="#"&gt;
                                      &lt;i class="fa fa-minus" aria-hidden="true"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;                            
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And the jQuery code to create html controls dynamically is below:</p>
  
  <pre><code>$(document).ready(function () {
          $("#add").click(function () {
              var html = $('#mytable tbody&gt;tr:first').clone(true);            
              html.find('[class=selItem]').attr("id", "newIds");
              html.insertAfter('#mytable tbody&gt;tr:last');
  
              return false;
          });
      });
  </code></pre>
  
  <p>Now in this code </p>
  
  <blockquote>
    <p>html.find('[class=selItem]').attr("id", "newIds");</p>
  </blockquote>
  
  <p>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?</p>