title: Jquery UI sortable not working for appended rows
body: <p>I am trying to use jQuery UI to make a sortable table. It is working fine for the rows already added before the page load. However, I also have function to let users to add new rows, if they need.</p>
  <p>jQuery UI sortable function not working for these appended rows.</p>
  <p>HTML:
  </p>
  <pre><code>&lt;button id=&quot;add&quot; onclick=&quot;cloneRow()&quot;&gt;Add row(s)&lt;/button&gt;
  
  &lt;table id=&quot;testTable&quot; class=&quot;table&quot;&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Column 1&lt;/th&gt;
              &lt;th&gt;Column 2&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr id=&quot;rowFirst&quot;&gt;
              &lt;td&gt;#&lt;/td&gt;
              &lt;td&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;c1[]&quot;&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;c2[]&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;#&lt;/td&gt;
              &lt;td&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;c1[]&quot;&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;c2[]&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>            function cloneRow() {
                  var rowAmount = document.getElementById(&quot;rowAmount&quot;).value;
                  var getTotalRows = $('table &gt; tbody').children().length;
                  for (var i = -1; i &lt; rowAmount - 1; i++) {
                      var row = document.getElementById(&quot;rowFirst&quot;); // find row to copy
                      var table = document.getElementById(&quot;testTable&quot;); // find table to append to
                      var clone = row.cloneNode(true); // copy children too
                      clone.id = &quot;newRow&quot; + (getTotalRows + i); // change id or other attributes/contents
                      clone.classList.remove('hidden');
                      table.appendChild(clone); // add new row to end of table
                      $('#newRow' + (getTotalRows + i)).children().each(function() {
                          $(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
                      });
  
                  }
              }
  
  
  $(&quot;table tbody&quot;).sortable({});
  </code></pre>
  <p><a href="https://jsfiddle.net/brkztrk/3odnr4t2/5/" rel="nofollow noreferrer">https://jsfiddle.net/brkztrk/3odnr4t2/5/</a></p>
  <p>As you can see first two  rows are perfectly sortable, but rows appended by cloneRow() function are not sortable.</p>
  <p>does anybody has any idea how to fix this?</p>
  <p>Thanks a lot!</p>