jQueryを使用してhtmlテーブルの最後に列を追加するにはどうすればよいですか？

Question

jQueryを使用して、その場でhtmlテーブルの最後に列を追加しようとしています。

私は次のHTMLテーブルを作成しました。

<table class="table table-bordered table-striped" id="reportColumns"> 

    <thead> 
     <tr></tr> 
    </thead> 

    <tbody> 
     <tr></tr> 
    </tbody> 

</table> 

は、それから私は、次のjQueryコード

$('.checkbox').click(function(){ 
     var id = $(this).attr('data-tag'); 

     $("#reportColumns > thead > tr").append('<th id="'+ id +'">Some Column header</th>'); 

     $("#reportColumns > tbody > tr").append('<td>-</td>'); 
}); 

しかし、これは動作していない何らかの理由を追加しました。テーブルに列が追加されていません。表は表示されません。

この問題を解決するにはどうすればよいですか？このスコア及びこれらのバッジ付き

Answer 1

チェックこのjsfiddle

<table class="table table-bordered table-striped"  id="reportColumns"> 

     <thead> 
      <tr>fasdfsa</tr> 
     </thead> 

     <tbody> 
      <tr>afsdfa</tr> 
     </tbody> 

    </table> 
    <div class="checkbox">Click me</div> 

Answer 2

$("#reportColumns thead tr").append('<th id="'+ id +'">Some Column header</th>') 
    $("#reportColumns tbody tr").append('<td>-</td>') 

https://jsfiddle.net/sajjansarkar/v9gvjxjz/3/