How do I add multiple eventListener scripts that don’t listen to each other?

I am developing a rubric as a sort of pet project. The rubric contains two sections – one called
“Report Admin” and one called “Report Text”. Each portion has three sub-sections with radio buttons, and each sub-section’s radio buttons have values of “1”, “0.5”, and “0”. I have an eventListener script written in that counts the values of the radio buttons for the “Report Admin” section and displays the cumulative value:

        adminButtons.addEventListener('change', () => {
  adminResult.textContent = [...document.querySelectorAll('input[type=radio]:checked')]
    .reduce(
      (acc, val) => acc + Number(val.value)
      , 0
    )
  }
)

However, when I add in the second section, “Report Text,” and alter the script accordingly (or so I thought), the eventListener scripts seem to listen to each other and, despite being separate portions, and the displayed cumulative value is for all radio buttons clicked on the whole page, and not just a section.

In the picture, you can see that when clicking the green buttons, the grade for the first section is 2, but the grade for the second section is 4. I’m trying to figure out how to display them both as 2.

This is the code used for the Report Text section:

        textButtons.addEventListener('change', () => {
  textResult.textContent = [...document.querySelectorAll('input[type=radio]:checked')]
    .reduce(
      (acc, val) => acc + Number(val.value)
      , 0
    )
  }
)

I was hoping someone might know how to help me rectify this issue.

The “Report Admin” radio buttons are all within the same div, <div id="adminButtons"></div> and the “Report Text” radio buttons are all within the same div, <div id="textButtons"></div>. I cannot figure out how to get them to stop adding together.