title: append an object to the last row of a table
body: <p>i have two table like this</p>
  
  <pre><code>&lt;table&gt;
     &lt;tr&gt;
  &lt;td&gt;
      &lt;select name="prueba" id="prueba" class="ddlStyles"&gt;
          &lt;option value=""&gt;Elige un estilo&lt;/option&gt;
          &lt;option value="messageTextStyle1"&gt;Estilo 1&lt;/option&gt;
          &lt;option value="messageTextStyle2"&gt;Estilo 2&lt;/option&gt;
          &lt;option value="messageTextStyle3"&gt;Estilo 3&lt;/option&gt;
      &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt;
      &lt;input name="primerboton" id="butonID" type="button" value="Copiar" /&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table id="tblSalida"&gt;
  &lt;tr&gt;
      &lt;td&gt;
          salida
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>when the user do a click a i need to copy the object in a new row of table the problem it's that with the selector add a new column. how can i accomplish my goal</p>
  
  <p>This is my js</p>
  
  <pre><code>$(document).ready(initialize);
  
  function initialize(){
   $("#butonID").click(function (){
       $("#prueba").clone().attr('id','nuevo').attr('class','').appendTo("#tblSalida tr:last");
  })
  </code></pre>