Javascript or Jquery add, remove, copy rows to table
<p>I want to know how to or where to find this kind of code. Let me show you first</p>

<blockquote>
  <p>----- demonstration start ----- Add new line</p>
  
  <p>Line 1 - textbox | textbox | checkbox | radiobox | btnCopy, btnDelete,
  btnAdd</p>
  
  <p>Line 2 - textbox | textbox | checkbox | radiobox | btnCopy, btnDelete,
  btnAdd</p>
  
  <p>Line 3 - textbox | textbox | checkbox | radiobox | btnCopy, btnDelete,
  btnAdd</p>
  
  <p>----- demonstration end -----</p>
</blockquote>

<p>I hope you understand what it is. Theses -boxes mean html input elements. btn- mean buttons that i am going to press.</p>

<p>I want like this.</p>

<p>After I press btnAdd @ Line 1, another new line of "Line 1" will appear without any data in textboxes just after Line 1, not the end of table, in this case Line 3.
After I press btnDelete except original Line 1, that line will be removed. That mean original Line 1, Line 2, Line 3 cannot be removed, but any other additional line will be.
After I press btnCopy @ Line 1, any data inserted in Line 1 will be copied to just-inserted new line.
These process will be the same for Line 1, 2 &amp; 3.</p>

<p>However if I press "Add new line" @ the top of the demonstration, another new line will be inserted @ the end of the table(in this case line 3).</p>

<p>Any other ideas. The demonstration I shown above is going to used in my project, so it is better if it really can interact with database. Like looping through IDs for insert multiple datas, something like that.</p>

<p>Any idea ?</p>
