title: How to clone and append a table row
body: <p>I have a table that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/DDRBQ.png" alt="enter image description here"></p>
  
  <p>When the user clicks on the <code>+</code> button I am trying to copy the row shown and append it below, but also with a remove link so something like this after the <code>Component Thickness</code> column.</p>
  
  <p><code>&lt;td&gt;&lt;a href='#' id='remove'&gt;Remove&lt;/a&gt;&lt;/td&gt;</code></p>
  
  <p>Only anything after the first row should include this remove link.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table id="component_table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Component&lt;/th&gt;
              &lt;th&gt;Component Type&lt;/th&gt;
              &lt;th&gt;Component Thickness&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="component_tb"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;?php echo $roofComponentDropDown ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;?php echo $roofComponentTypeDropDown ?&gt;&lt;/td&gt; 
              &lt;td&gt;&lt;input id="component_thickness" name="component_thickness" type="text"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;input type="button" value="+" id="addRows" /&gt;
  </code></pre>
  
  <p>The drop downs are being generated in <code>PHP</code> and the data I am using for the options are queried out of a database, if you want to see how I am doing this (I don't think it matters) I can make an edit and include the code.</p>
  
  <p>Here is what I have so far in regards to JQuery</p>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$(function() {
      $("#addRows").click(function() {
          $("#component_tb").append("&lt;tr&gt;&lt;td&gt;new row&lt;/td&gt;  &lt;td&gt;new row&lt;/td&gt;  &lt;td&gt;new row&lt;/td&gt; &lt;a href='#' id='remove'&gt;Remove&lt;/a&gt; &lt;/tr&gt;");
      });
  });
  </code></pre>
  
  <p>This appends another row to my table but obviously doesn't include my dropdowns, nor does it add a <code>remove</code> link. </p>
  
  <p>I have tried <code>$("#component_tb").clone().appendTo("component_tb");</code> just to try to see if I can get the cloning of my row (without adding a remove link) to work, but when I clicked my button nothing at all happens. </p>
  
  <p>Any help would be awesome, </p>
  
  <p>Thanks</p>