jQuery can't clone() and appendTo() with html before

People am here because am having this code that actually doesnt work, it bassically duplicate a row and make a new row for a new entry. Am ussing clone() and appendTo().

JSFIDDLE

But if you remove the last part of the html it will work, it seems like if there is a new tag it goes worng syntax, please could someone help me with this trouble?.

<table>
    <tr>
        <td>Hello world!</td>
   </tr>
</table>

Thanks!

There are few issues in your fiddle

1: the row element selected to be cloned is wrong.

2: parent element should be table but that is wrongly selected.

You can use the below modified code for cloning and appending the row.

 $("#clone").click(function() {
    i++;
    $("#remove").removeAttr("disabled");
    var parent = $("#data");
    var tr = $("#data tr:last");
    console.log(tr);
    var e = tr.clone().appendTo(parent);
    $(e).find("[type=text],[type=hidden]").each(function() {
      $(this).val('');
    });
  });

updated Fiddle : https://jsfiddle.net/363m6dsy/6/