Checkbox Filter HTML Table jQuery

I have a HTML table which I have made that has some document.ready functions already attached to it the table simply sorts data(tr) by class(.amount) on load and also has paging - the paging technique is using existing HTML.

I'd like to now add a checkbox filter using jQuery if possible, What I'd like to do is filter the table when the checkbox is clicked to only show table rows that have a cell with the id:

#free

and obviously contain data no upfront cost.

http://ift.tt/1TD8iLa

        <h1>Table sorting on page load with paging</h1>

    <input type="checkbox"> Free Handset

    <table id="internalActivities">
    <thead>
      <tr>
        <th>head1</th><th>head2</th><th>head3</th><th>head4</th>
      </tr>
    </thead>
    <tbody>
    <tr>
    <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£364.00 upfront</span><br><span class="amount">£10.10 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£40.40 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£30.30 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£16.04 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£134.00 upfront</span><br><span class="amount">£12.19 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£120.00 upfront</span><br><span class="amount">£14.22 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£50.22 per month</span></td>
    </tr>
    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£10.33 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£40.45 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£200.00 upfront</span><br><span class="amount">£30.84 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£16.14 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£12.10 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£14.02 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£50.88 per month</span></td>
    </tr>
    </tbody>
    </table>

    <input type="button" id="seeMoreRecords" value="More">
    <input type="button" id="seeLessRecords" value="Less">

I have made a jsfiddle so you can see exactly what I mean.