Появляется ошибка, связанная с JS для кнопки переключения

Я уже объявляю ID в своем <div>, однако появляется ошибка, как решить эту ошибку.

Ниже мой код для справки

HTML

<div class = "row">
 <div>
  <input type = "checkbox" data-column = "0" class = "toggle-vis" data-label-text = "No" checked/>
  <input type = "checkbox" data-column = "1" class = "toggle-vis" data-label-text = "Region" checked>
  <input type = "checkbox" data-column = "2" class = "toggle-vis" data-label-text = "IBSE Node" checked/>
 </div>
<div>
 <table class = "data-table stripe hover multiple-select-row nowrap" id = "example">
  <thead>
   <tr>
    <th class = "table-plus datatable-nosort">No</th>
    <th>Region</th>
    <th>IBSE Node</th>
   </tr>
  </thead>
 </table>
</div>

JS

<script>
    $(function(){
        $.fn.bootstrapSwitch.defaults.onColor = 'success';
        $.fn.bootstrapSwitch.defaults.offColor = 'danger';
        $.fn.bootstrapSwitch.defaults.size = 'mini';
        $.fn.bootstrapSwitch.defaults.state = 'false';
        $.fn.bootstrapSwitch.defaults.inverse = 'true';
        $(".toggle-vis").bootstrapSwitch();
            var table = $('#example').DataTable();
        $('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) {
            event.preventDefault();
            var column = table.column($(this).attr('data-column'));
            column.visible( ! column.visible() );
        });
    });
</script>