insert td element to group of rows

I made a button to add cells to a group of rows as a column but when I'm trying to click the button to add an entire column it inserts the td element as a text

here is the code

add_col.on('click',function() {
    var table = $('#table_data'), //get the table
    rowsNum = $('#table_data tr').length // get number of rows
    cellsNum = document.getElementById('table_data').rows[0].cells.length
    for(x = 0;x < rowsNum; x++){
      //document.getElementById('table_data').rows[x].insertCell(cellsNum)
      document.getElementById('table_data').rows[x].append('<td></td>')
    }    
})

[https://jsfiddle.net/georgesteven1/3kpg6e8c/9/][1]