Wedding RSVP conditional form

Site URL: https://huwelijklouisendeborah2023.squarespace.com/rsvp

Hi,

I'm trying to create a conditional RSVP form for my wedding guests.

When the guests choose one of the options, they should see different variants of the checkboxes (for example close friends can see a checkbox where they are invited to 2 days, and acquaintances are only invited to 1 day and should see another checkbox).

In the Settings > Advanced > Code injection section, I managed to hide all the checkboxes of the form, and only show the 'radio' selection witch all the types of guests options.

I also managed to show some checkboxes when our parents click on 'Ouders' (parents in Dutch); BUT, they can also see all the other checkboxes for the other guests, which should be hided as I only want to show them a part of the checkboxes. How can I fix this and also add the options for the other guests?

This is the code I currently use:

HEADER SECTION

<style>
  .header-burger-btn.no-nav-links {
    opacity: 0;
    pointer-events: none;
  }
</style>

<style>
  #checkbox-689bbc43-5441-43ca-a870-9d2d07421b11,
  #checkbox-19d3e169-f8db-4011-b726-c5dd04f22259,
  #name-yui_3_17_2_1_1555014059115_8407,
  #email-yui_3_17_2_1_1555014059115_8408,
  #textarea-662fb312-21ff-4cb1-a803-3090e8febd29,
  #checkbox-732dfeaa-8ce1-42e5-842c-6cfed53e6848,
 #checkbox-999f5d6f-3b33-40e3-93e9-fb3009dcdc29,
  #checkbox-32106fba-0384-46fb-820f-0a2d5ba888fa
 {
 display: none;
  }
</style>

FOOTER SECTION

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<script>
 $('#radio-ac38af45-f6ee-475f-beb2-ea59ebb0cd5b input').click(function()  {
          selection = $(this).val();
            if (selection == 'Ouders')  {
                 $ ('.form-item').show();
     }
  });
</script>