Proper way to use appendTo in jquery

Question

Am I using the jquery appendTo method correctly in the code below?

I ask because it displays correctly when I test it in jsfiddle , but when I use the same code on my local server (in FF, IE and Chrome) it displays with elongated fields:

I assume that I am doing something wrong. Thanks.

HTML

<div class="ws-css-table" > <div class="ws-css-table-tr"> <div class="ws-css-table-td"></div> <div class="ws-css-table-td"></div> </div> <div class="ws-css-table-tr"> <div class="ws-css-table-td"></div> <div class="ws-css-table-td"></div> </div> <div class="ws-css-table-tr"> <div class="ws-css-table-td"></div> <div class="ws-css-table-td"></div> </div> </div> <br/> <button id="css-icol">Col +</button><br/><br/> 

JQuery

 $('#css-icol').click(function(){ $(".ws-css-table-td:last").clone().appendTo('.ws-css-table-tr'); var tblArr = $('.ws-css-table > .ws-css-table-tr').map(function () { return $(this).children().map(function () { return $(this); }); }); lastCol = $('.ws-css-table-tr:first > .ws-css-table-td').length; for (r=0; r<$('.ws-css-table-tr').length; r++) tblArr[r][lastCol-1].text('X'); }); 

CSS

 .ws-css-table { display: table; } .ws-css-table-tr { display: table-row; } .ws-css-table-td { display: table-cell; border:1px solid #000; width: 15px; height:15px; text-align:center; vertical-align:middle; } 

Answer 1

There is an error in this line:

 $(".ws-css-table-td:last").clone().appendTo('.ws-css-table-tr'); 

You select the last cell in the table and clone it into each row. When you want to copy a column, you need to select the last cells in all rows, then you will need to iterate over the cloned cells. Finally, the after method is more elegant here ...

 $(".ws-css-table-td:last-child") .each(function(){ var $this=$(this) $this.after($this.clone()) }) 

To create an empty column, use:

 $(".ws-css-table-td:last-child") .after("<div class='ws-css-table-td'/>")