move a column ,including th, between tables in jQueryUI sortable

Question

Fiddle Example

I have two example tables with subject titles in the first cells.

<table class='sort connect'>
    <thead>
        <tr>
            <th class='ui-state-disabled'></th>
            <th>Person 1</th>
            <th>Person 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ui-state-disabled'>Age</td>
            <td>18</td>
            <td>23</td>
        </tr>
         <tr>
            <td class='ui-state-disabled'>Job</td>
            <td>Clerk</td>
            <td>Policeman</td>
        </tr>
    </tbody>
</table>


<table class='sort connect'>
    <thead>
        <tr>
            <th class='ui-state-disabled'></th>
            <th>Person 3</th>
            <th>Person 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ui-state-disabled'>Age</td>
            <td>17</td>
            <td>46</td>
        </tr>
         <tr>
            <td class='ui-state-disabled'>Job</td>
            <td>Student</td>
            <td>Firefighter</td>
        </tr>
    </tbody>
</table>

I've made the first child of th and td unsortable since they are titles. Is there any way to move other columns, one at a time (td:nth-child,th:nth-child), to the other table using jQueryUI sortable? How can I make a whole column sortable in the change or start event?

Here's my expected output:

<table class='sort connect'>
    <thead>
        <tr>
            <th class='ui-state-disabled'></th>
            <th>Person 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ui-state-disabled'>Age</td>
            <td>18</td>
        </tr>
         <tr>
            <td class='ui-state-disabled'>Job</td>
            <td>Clerk</td>
        </tr>
    </tbody>
</table>


<table class='sort connect'>
    <thead>
        <tr>
            <th class='ui-state-disabled'></th>
            <th>Person 3</th>
            <th>Person 2</th> // sorted
            <th>Person 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ui-state-disabled'>Age</td>
            <td>17</td>
            <td>23</td> //sorted
            <td>46</td>
        </tr>
         <tr>
            <td class='ui-state-disabled'>Job</td>
            <td>Student</td>
            <td>Policeman</td> //sorted
            <td>Firefighter</td>
        </tr>
    </tbody>
</table>

JS code:

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
};

$(function() {
    $( ".sort" ).sortable({
    change: function( event, ui ) {
      var see = ui.item.index();
          console.log(see);
      $(this).find('td:nth-child(see),th:nth-child(see)')
    },
     helper: fixHelperModified, 
     cancel: ".ui-state-disabled",
     connectWith: ".connect"
    }).disableSelection();
  });

Answer 1

What about something like this?

It's a workaround for what you're asking, but it does basically the same thing, just fix the styling, spaces, etc. as you'd like

HTML

<div class="sortableContainer sort connect">
    <div>
        <table>
            <thead>
                <tr>
                    <td height="20px"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Age</td>
                </tr>
                <tr>
                    <td>Job</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <td>Person 1</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>18</td>
                </tr>
                <tr>
                    <td>Clerk</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <td>Person 2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>23</td>
                </tr>
                <tr>
                    <td>Policeman</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="sortableContainer sort connect">
    <div>
        <table>
            <thead>
                <tr>
                    <td height="20px"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Age</td>
                </tr>
                <tr>
                    <td>Job</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <td>Person 3</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>17</td>
                </tr>
                <tr>
                    <td>Student</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <td>Person 4</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>46</td>
                </tr>
                <tr>
                    <td>Firefighter</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

td, th {
    border:1px solid #222
}
.red {
    background:red
}
.ui-state-disabled {
    opacity:1
}
.sortableContainer>div {
    display:inline-block;
}
table {
    border-spacing:0px;
    border-collapse:collapse;
}

JS

$(function () {
    $(".sort").sortable({
        connectWith: ".connect"
    }).disableSelection();
});