title: Do I need to refactor this javascript for conditional form logic?
body: <p>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.</p>
  <p>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.</p>
  <p>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.</p>
  <p>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?</p>
  <p>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?</p>
  <p>Thanks for your input.</p>
  <pre class="lang-js prettyprint-override"><code>    // &quot;Purpose of Notification&quot; 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(&quot;patient-level&quot;).removeAttribute(&quot;hidden&quot;);
          // and show 100 level for yes and make it required
          document.getElementById(&quot;patient-level-100&quot;).removeAttribute(&quot;hidden&quot;);
          document.getElementById(&quot;level1&quot;).required = true;
          // hide and un-require the 30 level radio group
          document.getElementById(&quot;patient-level-30&quot;).hidden = true;
          document.getElementById(&quot;level3&quot;).required = false;
        }
        else if (event.target.matches('#waiver30100bno')) {
          // show the patient level group
          document.getElementById(&quot;patient-level&quot;).removeAttribute(&quot;hidden&quot;);
          // and show 30 level for no and make it required
          document.getElementById(&quot;patient-level-30&quot;).removeAttribute(&quot;hidden&quot;);
          document.getElementById(&quot;level3&quot;).required = true;
          //hide and un-required the 100 level radio group
          document.getElementById(&quot;patient-level-100&quot;).hidden = true;
          document.getElementById(&quot;level1&quot;).required = false;
          //
        }
      }, false);
  </code></pre>