jquery sortable table

I have a foreach loop running over an array passed to a view, displayed in a table. I am trying to use jquery sortable so the order of the rows can be sorted manually by the user. table looks like this:

<div class="section-jobs" style="width: 45%; float: left;">
        <h5>Jobs for Specials Section</h5>
        <table id="sortable" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sectionJobs as $job)
                    <tr>
                        <td>{!! $job->title !!}</td>
                        <td>{!! $job->description !!}</td>
                        <td>{!! $job->start_date !!}</td>
                        <td>{!! $job->end_date !!}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

simple script looks like this:

$(function() {
            $( "#sortable" ).sortable();
            $( "#sortable" ).disableSelection();
        });

the script works if I use an unordered list and line items but as a table it doesn't? followed the docs and can't work out why it's not working

any thoughts?

thanks