我是否需要重构此 javascript 以实现条件形式逻辑？

Question

我在 Laravel 中有一个表单，它遍历了多个模板（刀片）。对于每个模板，我都实现简单的条件逻辑来显示和隐藏问题组。

对于模板，我使用 HTML5 进行高效的客户端验证。我编写了下面的 javascript 来使用 HTML 属性显示和隐藏字段。

下面的示例通过暴露隐藏的单选按钮组来回答是/否问题。一组用于回答“是”，一组用于回答“否”。

我的问题是，我需要重构它吗？有没有更有效的方法我应该编写这个javascript，或者我做得还好吗？

我正在使用事件侦听器，以便点击可以冒泡，我知道这是最有效的。由于我有多个页面，因此我有多个事件监听器，每个模板一个。有更好的方法吗？

感谢您的意见。

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