Have a button change from off to on state

What I want to do is have a random button change from the "off" state to "on" when an image before it is clicked.

How it would work: You would press the blue play image and then one of the buttons would change from off to on.

Currently when you press the blue play image the buttons appear on the screen, then you have to click again to change one from off to on.

How would I be able to do this?

Have a random button change from off to on when an image before it is clicked.

That is what I am trying to do.

https://jsfiddle.net/6c2tLuh4/

(function manageCover() {

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

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

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
        const thewrap = cover.parentElement.querySelector(".container");
        show(thewrap);
    }

    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
}());

(function initPlayButtons() {

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function getPlay(button) {
        return button;
    }

    function showPlayButton(button) {
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("active");
    }

    function pauseAllButtons() {
        let buttons = document.querySelectorAll(".playButton");
        buttons.forEach(function hidePause(buttons) {
            if (isPlaying(buttons)) {
                showPlayButton(buttons);
            }
        });
    }

    function showPauseButton(button) {
        pauseAllButtons();
        button.classList.add("active");
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function playButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            playing,
            src: button.getAttribute("data-audio")
        });
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        playButton(button);
    }

    const playButtons = document.querySelectorAll(".button");
    playButtons.forEach(function addHandler(el) {
        el.addEventListener("click", playButtonClickHandler);
    });
}());