How to check/uncheck 3 secondary checkboxes according to 1 principal checkbox (19times)?

I have 19 cards of 4 checkboxes: 1 main checkbox (date) and 3 secondary checkboxes (options for that date). I would like the 3 secondary options to be checked when the main one is checked and conversely that they are unchecked when the main one is unchecked. I would like to use a single function for all 19 cards. However, checkboxes have different ids.

When I click on a main checkbox I get the id from the main checkbox I retrieve the number contained in the id I apply it to three values to create the id of 3 secondary checkboxes If the main checkbox is checked: I check the secondary checkboxes If the main checkbox is unchecked: I uncheck the secondary checkboxes

I tried with "onclick" and onchange.

function Autocheck(id) {

  var clicked_id = id;
  var StgNbr = clicked_id.substr(4);

  var diner = "Dîner" + StgNbr;
  var souper = "Souper" + StgNbr;
  var logement = "Logement" + StgNbr;

  if (clicked_id.checked = true) {
    alert('je suis coché');
    var items = document.getElementsByClassName('presence');
    for (var i = 0; i < items.length; i++) {

      if (items[i].id == diner)
        items[i].checked = true;
      if (items[i].id == souper)
        items[i].checked = true;
      if (items[i].id == logement)
        items[i].checked = true;
    }



  } else {
    alert('je suis décoché');
    var items = document.getElementsByClassName('presence');
    for (var i = 0; i < items.length; i++) {

      if (items[i].id == diner)
        items[i].checked = false;
      if (items[i].id == souper)
        items[i].checked = false;
      if (items[i].id == logement)
        items[i].checked = false;
    }

  }

}

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <div class="card">
      <label for="date1"><div class="card-media"><input type="checkbox" id="date1" class="date presence" name="Dates" onclick="Autocheck(this.id)">&nbsp; &nbsp;Mardi 23/07</div></label>
      <div class="card-details">
        <input type="checkbox" class="presence" name="Dîner" id="Dîner1">
        <label for="Dîner1">&nbsp; &nbsp;Dîner</label><br>
        <input type="checkbox" class="presence" name="Souper" id="Souper1">
        <label for="Souper">&nbsp; &nbsp;Souper</label><br>
        <input type="checkbox" class="presence" name="Logement" id="Logement1">
        <label for="Logement">&nbsp; &nbsp;Logement</label><br>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <div class="card">
      <label for="date2"><div class="card-media"><input type="checkbox" id="date2" class="date presence" name="Dates" onchange="Autocheck(this.id)">&nbsp; &nbsp;Mercredi 24/07</div></label>
      <div class="card-details">
        <input type="checkbox" class="presence" name="Dîner" id="Dîner2">
        <label for="Dîner2">&nbsp; &nbsp;Dîner</label><br>
        <input type="checkbox" class="presence" name="Souper" id="Souper2">
        <label for="Souper2">&nbsp; &nbsp;Souper</label><br>
        <input type="checkbox" class="presence" name="Logement" id="Logement2">
        <label for="Logement2">&nbsp; &nbsp;Logement</label><br>
      </div>
    </div>
  </div>

My secondary checkboxes are well cheched but they don't uncheck. Also : my 'test' alert is always saying that the principal checkbox is checked even if I uncheck it.

Thank you for your help.