checkboxes select a range in a repeater

Using the code from here, I am able to use the Check/Uncheck feature but once I put it into a repeater, the Range option does not select each checkbox anymore..

any help would be appreciated.

<script>

$(document).ready(function () {
    var lastChecked = null;
    var $chkboxes = $('input[type=checkbox]:not(#checkAll)');

    $chkboxes.click(function (e) {
        console.log("checkbox clicked");
        if (!lastChecked) {
            console.log("This was the first checkbox clicked");
            lastChecked = this;
            return;
        }
        if (e.shiftKey) {
            console.log("Shift held");
            var start = $chkboxes.index(this);
            var end = $chkboxes.index(lastChecked);
            $chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
        }
        lastChecked = this;
    });

    $("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $("input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });

        } else {
            $("input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });


});


</script>

Resulting HTML

   <td>                                                     
    <ul class="list-unstyled checkbox-list">
         <li>
            <label class="checkbox">
                <input id="ContentPlaceHolder1_ctl01_repGrid_chkItem_0" type="checkbox" name="ctl00$ContentPlaceHolder1$ctl01$repGrid$ctl01$chkItem" />
                <i></i>Select
                 </label>
        </li>
    </ul>
    </td>