Show or hide groups of questions

Question

I have a form in Laravel that goes over several templates (Blade files). 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 script is working great.

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?

// "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);

Answer 1

I will create some function to abstract the functionality of the codes like below:

// "Purpose of Notification" Blade
document.addEventListener(
    "click",
    function (event) {
        // When yes or no is choosen
        if (event.target.matches("#waiver30100byes")) {
            showParentLevelContainer();
            show100LevelRadioGrp();
            addReqLevel1();
            hideLevel30RadioGrp();
            removeReqLevel3();
        } else if (event.target.matches("#waiver30100bno")) {
            showParentLevelContainer();
            showLevel30RadioGrp();
            addReqLevel3();
            hide100LevelRadioGrp();
            removeReqLevel1();
        }
    },
    false
);

function hideLevel30RadioGrp() {
    document.getElementById("patient-level-30").hidden = true;
}

function showLevel30RadioGrp() {
    document.getElementById("patient-level-30").removeAttribute("hidden");
}

function addReqLevel1() {
    document.getElementById("level1").required = true;
}

function removeReqLevel1() {
    document.getElementById("level1").required = false;
}

function addReqLevel3() {
    document.getElementById("level3").required = true;
}

function removeReqLevel3() {
    document.getElementById("level3").required = false;
}

function showParentLevelContainer() {
    document.getElementById("patient-level").removeAttribute("hidden");
}

function show100LevelRadioGrp() {
    document.getElementById("patient-level-100").removeAttribute("hidden");
}

function hide100LevelRadioGrp() {
    document.getElementById("patient-level-100").hidden = true;
}