title: Event listener, with radio-button stops working
body: <p>So I'm making this basic assignment from university, regarding DOM Manipulation. </p>
  
  <p>Basically, I have user profiles on a HTML page, and there are 2 radio boxes - Unlock and Lock. So when you toggle the 'Unlock' and click on a button 'Show More' it shows you the data for that profile, and changes the name of the button to 'Hide it'. Problem is I click on 'Show More', then click on 'Hide it' and then when I click on 'Show more' again it does not work. It's like the whole event listener stops working.</p>
  
  <pre><code>function lockedProfile() {
      const $buttons = document.getElementsByTagName('button');
  
      Array.from($buttons).forEach(button =&gt; {
          button.addEventListener('click', e =&gt; {
              const parent = e.currentTarget.parentNode;
              const checkBox = parent.children[4];
  
              if (checkBox.checked) {
                  parent.children[9].style.display = 'block';
                  parent.children[10].textContent = 'Hide it';
                  button.addEventListener('click', () =&gt; {
                      if (checkBox.checked) {
                          parent.children[10].textContent = 'Show More';
                          parent.children[9].style.display = 'none';
                      }
                  });
              }
          });
      });
  }
  </code></pre>
  
  <p>I don't know how relevant the HTML Code is, but here it is, if you want to check it:</p>
  
  <p><a href="https://pastebin.com/hDaiKTTZ" rel="nofollow noreferrer">https://pastebin.com/hDaiKTTZ</a></p>
  
  <p>Thanks!</p>