HTML + JQuery select all checkboxes, modify existing code

Good day,

I have once in a long dark past found some code to check or uncheck all paired checkboxes.

Now I have accidentally used the code twice. And I noticed that all of the checkboxes carrying the same name get selected. Hence a matter of duplicate ID's or names.

Now I want to alter this. But as soon as I am making just a small change to the existing code the script stops working. And I have no idea at what line the script gets "corrupted".

This is the HTML code

<table class="panel_checkboxes" style="top: -20px;">
    <tr>
        <th>Select ALL</th>
        <th>
        <input id="selectall" class="regular-checkbox small-checkbox" type="checkbox" /><label for="selectall" style="margin-left: 25px;"></label></th>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>Location 4</td>
        <td>
        <input id="checkbox-panel-4" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="4" /><label for="checkbox-panel-4" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 6</td>
        <td>
        <input id="checkbox-panel-6" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="6" /><label for="checkbox-panel-6" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 5</td>
        <td>
        <input id="checkbox-panel-5" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="5" /><label for="checkbox-panel-5" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 7</td>
        <td>
        <input id="checkbox-panel-7" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="7" /><label for="checkbox-panel-7" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 3</td>
        <td>
        <input id="checkbox-panel-3" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="3" /><label for="checkbox-panel-3" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 2</td>
        <td>
        <input id="checkbox-panel-2" checked="checked" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="2" /><label for="checkbox-panel-2" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
</table>

The JQUERY code :

//<![CDATA[ 

$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedpanelsId').prop('checked', isChecked('selectall'));
    });
});
function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}
function resetSelectAll() {
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    if ($(".selectedpanelsId").length == $(".selectedpanelsId:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

    if ($(".selectedpanelsId:checked").length > 0) {
        $('#edit').attr("disabled", false);
    } else {
        $('#edit').attr("disabled", true);
    }
}
//]]>  

Now what I want is to change the ID selectall to selectallLocations And change the class : selectedpanelsId to SelectedLocationsID

Note I have created a fiddle so you can see what I mean:

JS Fiddle