Can this function be organized better?

I am up to organizing this group of functions:
https://jsfiddle.net/7dtkysg4/

I wasn’t sure what this function should be called.

so I decided to call it: resetPlayButtons() Is that good?

Also, container might need to be changed to something else, I borrowed it from the hideCurtains() function.

  function resetPlayButtons() {
    const container = document.querySelector(".outer");
    container.classList.add("isOpen");
  }

or, maybe it should be this?
I changed container to: allPlayButtons
or, maybe it should just be: playbuttons?

  function resetPlayButtons() {
    const allPlayButtons = document.querySelector(".outer");
    allPlayButtons.classList.add("isOpen");
  }

That function was created here: Post #9

and the code originally looked like this:

 document.querySelector(".outer").classList.remove("isOpen");
 document.querySelector(".outer").classList.add("isOpen");

Do you need to see the html, and css?

css

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 290px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 10px;
}

.outer.isOpen {
  display: flex;
  width: auto;
  align-content: stretch;
}

html
<div class="outer">

Also,

playedButton
Should that be called just, ‘played’ instead?

function addPlayed(playedButton) {

function addPlayed(played) {

or, maybe one of these?
function addPlayedButton(played) {

function addPlayButtonPlayed(played) {

function addButtonPlayed(played) {

What that function does is change the color of the play svg after it is clicked.

Current flow of the functions:

Hide is at the top.
I wasn’t sure where the addPlayed() should be placed.
I am thinking it would be placed below resetPage()

function hideAll(elements) {
function resetBackground(backgroundSelector) {
function resetPage() {
function addPlayed(playedButton) {
function showCovers(playButton) {
function coverClickHandler(evt) {
const manageCover = (function makeManageCover() {
    const config = {};

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function hideAll(elements) {
        elements.forEach(hide);
    }

    function resetBackground(backgroundSelector) {
        const allBackgrounds = document.querySelectorAll(backgroundSelector);

        function hideBackground(background) {
            background.classList.add("bg1");
        }
        allBackgrounds.forEach(hideBackground);
    }

    function resetPlayButtons() {
        const allPlayButtons = document.querySelector(".outer");
        allPlayButtons .classList.add("isOpen");
    }

    function resetPage() {
        resetBackground("body");
        resetPlayButtons();
    }

    function addPlayed(playedButton) {
        playedButton.classList.add("played");
    }

    function showCovers(playButton) {
        const cover = playButton.parentElement;
        cover.classList.add("active");
        show(cover);
    }

    function coverClickHandler(evt) {
        hideAll(config.containers);
        resetPage();
        addPlayed(evt.currentTarget);
        const cover = evt.currentTarget;
        showCovers(cover);
    }