title: How to copy table row with dropdownlist in with jQuery
body: <p>I have a table and I want to clone the last line of it after the <em>Add New</em> link is pressed. It works completely fine when I have only TextBoxes in my rows but it doesn't when there's a dropdown. Please help me to modify the jquery code.
  Here's the code of the table:</p>
  
  <pre><code>&lt;div&gt;&lt;a href="#" id="addNew"&gt;Add New&lt;/a&gt;&lt;/div&gt;
                  &lt;table id="dataTable"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Item&lt;/th&gt;
                          &lt;th&gt;Cost&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      @if (Model != null &amp;&amp; Model.Count &gt; 0)
                      {
                          int j = 0;
                          foreach (var i in Model)
                          {
                              &lt;tr&gt;
                                  &lt;td&gt;@Html.DropDownListFor(a =&gt; a[j].fk_purchase_id, (SelectList)ViewBag.fk_purchase_id, null, htmlAttributes: new { @class = "form-control"})&lt;/td&gt;
                                  &lt;td&gt;@Html.TextBoxFor(a =&gt; a[j].cost, htmlAttributes: new { @class = "form-control" })&lt;/td&gt;
                                  &lt;td&gt;
                                      @if (j &gt; 0)
                                      {
                                          &lt;a href="#" class="remove"&gt;Remove&lt;/a&gt;
                                      }
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              j++;
                          }
                      }
                  &lt;/table&gt;
  </code></pre>
  
  <p>And here's the code that needs some improvement:</p>
  
  <pre><code> &lt;script&gt;
          $(function () {
              //1. Add new row
              $("#addNew").click(function (e) {
                  e.preventDefault();
                  var $tableBody = $("#dataTable");
                  var $trLast = $tableBody.find("tr:last");
                  var $trNew = $trLast.clone();
                  alert($trNew.html);
                  var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
                  $trNew.find("td:last").html('&lt;a href="#" class="remove"&gt;Remove&lt;/a&gt;');
                  $.each($trNew.find(':input'), function (i, val) {
                  // Replaced Name
                  var oldN = $(this).attr('name');
                  var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                   $(this).attr('name', newN);
                   //Replaced value
                  var type = $(this).attr('type');
                  if (type.toLowerCase() == "text") {
                   $(this).attr('value', '');
                    }
                    });
  
                  $trLast.after($trNew);
              });
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>I tried to modify this line whith changing <strong><em>input</em></strong> to <strong><em>select</em></strong>, but it didnt help</p>
  
  <blockquote>
    <p>var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);</p>
  </blockquote>