How to dynamically add a new column to an HTML table

I updated your fiddle with a small example how you could do that.

jsFiddle – Link

var myform = $('#myform'),
    iter = 0;

$('#btnAddCol').click(function () {
     myform.find('tr').each(function(){
         var trow = $(this);
         if(trow.index() === 0){
             trow.append('<td>Col+'iter+'</td>');
         }else{
             trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
         }
     });
     iter += 1;
});

This would add a new column to every row, including an count-variable that gets applied to the first row as name and to the name-attribute of the checkboxes on the following rows.

Consider using th – elements for the table header, that way you wouldn’t need the index-check i’m making and it would be more semantically correct.

I left out the part where the user would put in a name for the column, but as you see, you could just replace the iter – value with that in the end.