check a checkbox when other specific checkbox is checked is not working properly

Question

I have form that has some questions (email, phone number) and then the user can select if that field should be included for the registration types that exist for a conference (in this case RT 001 and RT 002) and also if that field should be mandatory or not for each registration type. (Layout: https://ibb.co/kftnPc )

I have this code below to when the input with "mandatorycheckbox" class is checked that the input with "rtypecheckbox" be also checked. Because for sure if the field is mandatory for a specific registration type it needs to be included in the registration form for that specific registration type:

 $(function() {
      $('.mandatorycheckbox').change(function() {
       if (this.checked)
          $('.rtypecheckbox').prop('checked', true);
      });
});

Issue:

The issue is that when some "mandatory for RT 001" or "mandatory for RT 002" inputs are checked all "Include for registration type..." are checked.

But I just want that for example, if the checkbox "mandatory for RT 001" is checked check the "Include for registration type RT 001" and not check all inputs "Include for registration type...".

Do you know how to do that?

Html (in this case there are 2 questions for the conference):

    <form method="post" class="clearfix"
          action="{{route('questions.update', ['conf_id' => $conf->id])}}" enctype="multipart/form-data">

  <table class="table table-striped table-responsive-sm">
  <thead>
    <tr>
      <th scope="col">Info</th>
      <th scope="col">Include for registration type</th>
      <th scope="col">Mandatory Field</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>whats your phone number?</td>
      <td>
        <div class="form-check">
          <input autocomplete="off" name="question[1][rtypes][]" class="form-check-input rtypecheckbox" type="checkbox" value="1" id="1">
          <label class="form-check-label" for="exampleRadios1">
            include for registration type "general"
          </label>
        </div>
        <div class="form-check">
          <input autocomplete="off" name="question[1][rtypes][]" class="form-check-input rtypecheckbox" type="checkbox" value="2" id="2">
          <label class="form-check-label" for="exampleRadios1">
            include for registration "plus"
          </label>
        </div>
      </td>
      <td>
        <div class="form-check">
          <input autocomplete="off"  name="question[1][mandatories][]"
                 class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="1">
          <label class="form-check-label" for="exampleRadios1">
            for the registration type "general"
          </label>
        </div>
        <div class="form-check">
          <input autocomplete="off"  name="question[1][mandatories][]"
                 class="form-check-input mandatorycheckbox" type="checkbox" value="2" id="2">
          <label class="form-check-label" for="exampleRadios1">
            for the registration type "plus"
          </label>
        </div>
      </td>
    </tr>
    <tr>
      <td>Whats your email?</td>
      <td>
        <div class="form-check">
          <input autocomplete="off" name="question[2][rtypes][]" class="form-check-input rtypecheckbox" type="checkbox" value="1" id="1">
          <label class="form-check-label" for="exampleRadios1">
             include for registration "general"
          </label>
        </div>
        <div class="form-check">
          <input autocomplete="off" name="question[2][rtypes][]" class="form-check-input rtypecheckbox" type="checkbox" value="2" id="2">
          <label class="form-check-label" for="exampleRadios1">
             include for registration "plus"
          </label>
        </div>
      </td>
      <td>
        <div class="form-check">
          <input autocomplete="off"  name="question[2][mandatories][]"
                 class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="1">
          <label class="form-check-label" for="exampleRadios1">
            for the registration type "geral"
          </label>
        </div>
        <div class="form-check">
          <input autocomplete="off"  name="question[2][mandatories][]"
                 class="form-check-input mandatorycheckbox" type="checkbox" value="2" id="2">
          <label class="form-check-label" for="exampleRadios1">
            for the registration type "plus"
          </label>
        </div>
      </td>
    </tr>

  </tbody>
</table>

Answer 1

You should use id selector instead of class selector, and make every checkbox with a unique id. Example like this:

$(function() {
      $('.mandatorycheckbox').change(function() {
       if (this.checked)
          $('#id1').prop('checked', true);
          $('#id2').prop('checked', true);
      });
});

Answer 2

Give your different checkboxes (for "general" and "plus" registration types) additional classes eg general and plus . Likewise you would give the mandatory checkboxes the same additional classes. eg based on your fiddle:

  <tr>
    <td>whats your phone number?</td>
    <td>
      <div class="form-check">
        <input autocomplete="off" name="question[1][rtypes][]" class="form-check-input rtypecheckbox general" type="checkbox" value="1" id="1">
        <label class="form-check-label" for="exampleRadios1">
          include for registration type "general"
        </label>
      </div>
      <div class="form-check">
        <input autocomplete="off" name="question[1][rtypes][]" class="form-check-input rtypecheckbox plus" type="checkbox" value="2" id="2">
        <label class="form-check-label" for="exampleRadios1">
          include for registration "plus"
        </label>
      </div>
    </td>
    <td>
      <div class="form-check">
        <input autocomplete="off"  name="question[1][mandatories][]"
               class="form-check-input mandatorycheckbox general" type="checkbox" value="1" id="1">
        <label class="form-check-label" for="exampleRadios1">
          for the registration type "general"
        </label>
      </div>
      <div class="form-check">
        <input autocomplete="off"  name="question[1][mandatories][]"
               class="form-check-input mandatorycheckbox plus" type="checkbox" value="2" id="2">
        <label class="form-check-label" for="exampleRadios1">
          for the registration type "plus"
        </label>
      </div>
    </td>
  </tr>

Then you could change the javascript to

$(function() {
      $('.mandatorycheckbox').change(function() {
       if (this.checked) {
          if ($(this).hasClass('general')
              $('.rtypecheckbox.general').prop('checked', true);
          else if ($(this).hasClass('plus')
              $('.rtypecheckbox.plus').prop('checked', true);
       }
      });
});

If the classes have to be dynamic, you could try something like

var questionClasses = ['general', 'plus', 'xyz', ...];

$(function() {
      $('.mandatorycheckbox').change(function() {
       if (this.checked) {
          for (var i = 0; i < questionClasses.length; i++) {
              if ($(this).hasClass(questionClasses[i])
                  $('.rtypecheckbox.' + questionClasses[i]).prop('checked', true);
              }
       }
      });
});