I have a jquery mobiile app which has hundreds of tables included within it. I'd like to be able to add a new row to the end of each of these tables which would include a cell with a button contained within it with a "data-"attribute derived directly from the table header of that table.

I've managed to add a row, and a "test" value to each but I'm completely at a loss as to how to get the column header to display in the bottom cell.

```
<table>
    <tbody>
        <tr>
            <th>0</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>michael</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>jeff</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>david</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>juan</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</html>

```

and the script...

```
$('table').on('click', 'td', function() {
    var $this = $(this),
        name = $this.siblings(':first-child').text(),
        pos = $this.index() + 1,
        num = $this.parent().siblings().first().children(':nth-child('+pos+')').text();        
    alert(num + ' & ' + name);
});

// appends a row to the bottom of the tables for Add to Cart Button 
$('table > tbody:last-child').append('<tr class="cartRow"></tr>');

// Selects each of the th cells
$('table > tbody > tr ').find('th').each(function() {
    // appends a cell to the row  
    $('table > tbody > tr:last-child').append('<td class="cartButton">'. value . '</td>');
});

// adds the button content to the table cell
$('.cartButton').append("test");

```