I have a form in Laravel that goes over several template (blades). For each template I am implementing simple conditional logic to show and hide groups of questions.

For the templates, I'm using HTML5 for efficient client-side validation. I wrote the javascript below to show and hide fields using HTML attributes.

The example below responds to a yes/no question by exposing hidden sets of radio buttons. One set is for answering Yes, one is for No.

My question is, do I need to refactor this? Is there a more efficient way I should be writing this javascript, or am I doing ok?

I'm using an event listener so that clicks can bubble up, understanding that this is most efficient. Since I have more than one page, I have more than one event listener, one for each template. Is there a better way to do that?

Thanks for your input.

    // "Purpose of Notification" Blade
    document.addEventListener('click', function (event) {
      // When yes or no is choosen
      if (event.target.matches('#waiver30100byes')) {
        // show the patient level group container
        document.getElementById("patient-level").removeAttribute("hidden");
        // and show 100 level for yes and make it required
        document.getElementById("patient-level-100").removeAttribute("hidden");
        document.getElementById("level1").required = true;
        // hide and un-require the 30 level radio group
        document.getElementById("patient-level-30").hidden = true;
        document.getElementById("level3").required = false;
      }
      else if (event.target.matches('#waiver30100bno')) {
        // show the patient level group
        document.getElementById("patient-level").removeAttribute("hidden");
        // and show 30 level for no and make it required
        document.getElementById("patient-level-30").removeAttribute("hidden");
        document.getElementById("level3").required = true;
        //hide and un-required the 100 level radio group
        document.getElementById("patient-level-100").hidden = true;
        document.getElementById("level1").required = false;
        //
      }
    }, false);