Display Single Table Cells in Row on Checkbox Clicked

I currently have a multiple column table with one column being a column full of checkboxes. Whenever I check a checkbox, I want an extra cell to appear on the right side of the table. Currently, when I check a checkbox, it displays the entire column, but I am wanting it to only display the cell that is in the corresponding row.

How can I do this?

My PHP/HTML code:

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr>
            <td><input type="checkbox" class="check" name="check"></td>
            <td class="loc"></td>
            <td class="rp-code" align="center"></td>
            <td class="sku"></td>
            <td class="special-id" align="center"></td>
            <td class="description"></td>
            <td class="quantity" align="center"></td>
            <td class="unit"></td>
            <td style="display: none;" class="quantity_num"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

My JavaScript Code:

$(function () {
    $(".check").change(function(){
    $("#merchTable th.num").toggle(this.checked);
    $("#merchTable td.quantity_num").toggle(this.checked); 
});
});

I have changed my code to make it work with a JSFiddle so you can see something for an example of what I currently have and what is going on:

http://ift.tt/2ph4kjK