How to "store" data from buttons?

Sorry, I'm super new to web dev, as you can probably tell. So basically, I want the user to be able to choose options from a couple different categories.

Basically, this is a language learning website.

1. They can click buttons to choose a male or female speaker or both
2. Choose number of trials through a slider
3. They can choose what sounds they want to practice out of a list - I used a MultiSelect list for this.

After they choose everything, there's a game start button.

So like I said, I'm really new to javascript and while I know how to toggle functions on click, I don't know how to store the button data (as in, whether it's clicked or not) and then use it when I toggle the game start button.

<button id="male" type="button" class="btn"> Male </button>
<button id="female" type="button" class="btn"> Female </button>

<input type="range" min="1" max="10" value="5" class="slider" id="myRange"> 

<div class="MultiSelect"> 
    <input type="checkbox" id="boxA" name="box[]"> 
        <label for="boxA">A</label> 
    <input type="checkbox" id="boxB" name="box[]"> 
        <label for="boxB">B</label>
</div>

<button type="submit" class="btn-submit"> Let's Start!</button>

Would someone be kind enough to walk me through it and show me an example (on maybe show me an example on one of the ones I listed)? Thank you so much!