How to link checkboxes to Datepicker.js with multidate selection in Laravel

I have 5 checkboxes for "Monday" "Tuesday" "Wednesday" "Thursday" and "Friday" and I want to use them to control the Datepicker. That being said, if "Monday" is checked, I want Datepicker to select all the Mondays in the future(at least next 356 days).

Since it works with typing the date in the text input, my logic is to generate all the Mondays dates first from my controller and put them in the input. And input value to trigger the event in bootstrap-datepicker.js, then to select all the related dates.

A few questions:

1: I have all the Mondays generated ok. is there a way to generate Tuesdays, Wednesdays, Thursdays, and Fridays more efficiently without repeated copying the Mondays code? So that no need to compact 5 $outputdate variables to the blade.

2: When I check Mondays checkbox, all the dates are there. However it doesn't trigger the event to select them in the inlined datepicker calendar. Those dates will only be selected when I edit the input values. I tried setDate with

 $( "#datepicker").datepicker('setDate', $('#field_results').val());

in the second function of the script after the field-results line. It only works with one date. So how to automatically trigger the multidate selections and have these dates selected when checkbox is selected?

3: I have checkboxes for other categories in the same form. At this moment, doesn't matter which checkbox is checked, it will put the value to the text input. How to specify the text input are only for these 5 checkboxes.

Another side question: is it a comment practice / or easier to put these type of checkboxes into a separate database and use pivot table to control them?

Thanks in advance.

Here is the controller for generating the future Mondays date:

  public function create(Request $request) {
  $date = new DateTime();
  $date->modify('next monday');
  $monday = new DateTime('monday');
  $endDate = clone $monday;
  $endDate->modify('+365 days');
  $dateInterval = new DateInterval('P7D');
  $dateRange = new DatePeriod($monday, $dateInterval, $endDate);
  $outputdate_ar = array();
  foreach ($dateRange as $day) {
    array_push($outputdate_ar, [
      $day->format('Y-m-d').""
      ]);
  }
  $outputdate_ar[] = $day;
  $outputdate_arr = array_column($outputdate_ar, 0);
  $outputdate = implode(',',$outputdate_arr);
  return view('courses/create', compact('outputdate'));
}

Here is the blade:

   <div class=" col-md-4 justify-content-between">
      <label for="availabledays" class=" col-form-label">Available days *</label>
      <div class="d-flex align-items-baseline">
        <input type="checkbox" name="availabledays[]" value=""><label for="mondays"  class="pl-2"> Every Mondays</label> 
     </div>
      <div class="d-flex align-items-baseline">
        <input type="checkbox" name="availabledays[]" value="Tuesdays"><label for="tuesdays" class="pl-2"> Every Tuesdays</label>
      </div>
      <div class="d-flex align-items-baseline">
        <input type="checkbox" name="availabledays[]" value="Wednesdays" ><label for="wednesdays" class="pl-2"> Every Wednesdays</label>
      </div>
      <div class="d-flex align-items-baseline">
        <input type="checkbox" name="availabledays[]" value="Thursdays"><label for="thursdays" class="pl-2"> Every Thursdays</label>
      </div>
      <div class="d-flex align-items-baseline">
        <input type="checkbox" name="availabledays[]" value="Fridays"><label for="fridays" class="pl-2"> Every Fridays</label>
      </div>              
    </div>
        <div class=" col-md-5 justify-content-between">
            <script>
                $( function() {
                  $( "#datepicker" ).datepicker({
                   startDate: new Date(),
                   multidate: true,
                   format: 'yyyy-mm-dd'
                    });
                } );
                $(document).ready(function(){
                      $checks = $(":checkbox");
                      $checks.on('change', function() {
                          var string = $checks.filter(":checked").map(function(i,v){
                              return this.value;
                          }).get().join(",");
                          $('#field_results').val(string);
                      });
                  });
            </script>

       </div>
       <div class="input-group date form-group" id="datepicker">
         <input type="text" class="form-control"  id="field_results" oninput="myFunction()" name="availabledays[]" value="" >
         <span class="input-group-addon">
         </span>
       </div>

I'm using the Datepicker.js from here:

"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"

"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"

Styles from here:

"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"