Toggling CheckBox

      <form>

                Age: <input type="checkbox" class="first" value="Below 10">Below 10
                        <input type="checkbox" class="first" value="Below 20"> Below 20
                        <input type="checkbox" class="first" value="Below 30">Below 30
                        <br>

                        You have clicked: 
                <span id="maClass">
                        
                </span>

          </form>
          <script type="text/javascript">
                        var maClass = document.querySelector("#maClass");
                        var first = document.querySelectorAll(".first");

                        var isClicked = false;
                        var i=0;
                        for(i; i<first.length ; i++){

                          first[i].addEventListener("click", function() {
        
                                if(isClicked){
                                        maClass.style.display = "none";
                                        isClicked = false;
                                }else{
                                        maClass.style.display = "inline";
                                        maClass.style.display = first[i].getAttribute("value");
                                        isClicked = true; 
                            }

                          });
                    }
          </script>

I tried to make these 3 checkboxes toggle. I used eventListener in Javascript. I used same class name for 3 different checkboxes. This is because, it will help me to store whole decision into one array. But it doesn't work I cannot make it toggle. Please help