Laravel how to filter table by date [UPDATED]

Hello guys, so I made an update to my table so the user can search the data filtered by date (year), by adding a drop down menu for the selection. I'm trying to use ajax to filter the date, but somehow I can't get it to work. May I know what is wrong with my code? Or is there another way to filter my table by date?

Blade file for the table view

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Tabel Pekerjaan</h3>
                  <br>
                  <div class="card-tools">
                    <a href="/tambahpekerjaan" type="button" class="btn btn-outline-success btn-block"><i class="fa fa-plus"></i>&nbsp Tambah Pekerjaan</a>
                  </div>

                  <div class="col-md-2">
                      <select id="filter-tahun" class="form-control filter">
                        <option value="">Pilih Tahun</option>
                        @foreach ($pekerjaan as $pekerjaans)
                          <option value="{{$pekerjaans->id}}">{{$pekerjaans->tanggal}}</option>
                        @endforeach
                      </select>
                  </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body table-responsive">
                  <table id="tabelpekerjaan" class="table table-bordered">
                    <thead>
                      <tr>
                        <th style="width: 10px">No.</th>
                        <th>Paket Pekerjaan</th>
                        <th>Tanggal</th>
                        <th>Nama Perusahaan</th>
                        <th>Lokasi Pekerjaan</th>
                        <th>PPK</th>
                        <th>HPS</th>
                        <th>Gambar</th>
                        <th style="width: 120px">Aksi</th>
                      </tr>
                    </thead>
                    <tbody>
                      @php $no = 1; @endphp
                      @foreach ($pekerjaan as $pekerjaans)
                      <tr>
                        <td>{{$no++}}</td>
                        <td>{{$pekerjaans->pekerjaan}}</td>
                        <td>{{$pekerjaans->tanggal}}</td>
                        <td>{{$pekerjaans->penyedia->nama}}</td>
                        <td>{{$pekerjaans->lokasi}}</td>
                        <td>{{$pekerjaans->user->name}}</td>
                        <td>Rp. {{number_format($pekerjaans->hps,0,',',',')}}</td>
                        <td>
                          <img src="{{asset('gambarpekerjaan/'.$pekerjaans->gambar)}}" style="width: 100px"alt="">
                        </td>
                        <td>
                            @if (Auth::user()->status=='super')
                              <a href="/editpekerjaan/{{$pekerjaans->id}}" type="button" class="btn btn-outline-primary">Edit</a>
                              <a href="#" type="button" class="btn btn-outline-danger delete" data-id="{{$pekerjaans->id}}" data-nama="{{$pekerjaans->pekerjaan}}">Hapus</a>
                            @else
                            <a href="/editpekerjaan/{{$pekerjaans->id}}" type="button" class="btn btn-outline-primary btn-block">Edit</a>
                              
                            @endif
                        </td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
                <!-- /.card-body -->
              </div>
              <!-- /.card -->
  
            
    </div>
</section>

here is the script [UPDATED]

<script>
  
  $(function () {
    // let pekerjaan = $("#filter-tahun").val();
    
    /*const table =*/ $('#tabelpekerjaan').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": true,
      "responsive": true,
      // "ajax":{
      //   url: "{{url('')}}/datapekerjaan",
      //   type:"POST",
      //   data:function(d){
      //     d.pekerjaan = pekerjaan;
      //     return d
      //   }
      // }
		initComplete: function(){
        this.api()
            .columns()
            .every(function(){
              var column = this;
              var select = $('<select><option value=""></option></select>')
                  .appendTo($(column.footer()).empty())
                  .on('change',function(){
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
 
                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                  });

                  column
                    .data()
                    .unique('Y')
                    .sort()
                    .each(function(d,j){
                      select.append('<option value="' + d + '">' + d + '</option>');
                    });
            });
}
    });

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })
  });

  
  @if (session()->has('message'))
    toastr.success("{{session()->get('message')}}")  
  @endif

  $('.delete').click(function(){
    var idpekerjaan = $(this).attr('data-id');
    var namapekerjaan = $(this).attr('data-nama');

    Swal.fire({
  title: 'Apakah Anda yakin?',
  text: "Paket Pekerjaan "+namapekerjaan+" akan dihapus!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Ya, yakin!'
}).then((result) => {
  if (result.isConfirmed) {
    window.location = "/deletepekerjaan/"+idpekerjaan+""
    Swal.fire(
      'Dihapus!',
      'Data berhasil dihapus.',
      'success'
    )
  }
});
  });

  // $(".filter").on('change',function(){
  //   pekerjaan = $("#filter-tahun").val()
  //   table.ajax.reload(null,false)
  // })
</script>

I commented on the ajax's part since it doesn't work at all and my table become a mess...

Here is what I want (but with unique year):

May I know how to resolve this problem? Thank in advance

UPDATE

I have already updated my code based on this https://www.datatables.net/examples/api/multi_filter_select.html . The problem now is instead of passing it above the table, like my screen shoot above, it only work on my header (since I dont have any footer) and show the other filter, although I only need it for the date. Here is the newest screen shot: