From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color. 

It's basically the same logic as a radio button on a form. Only one can be selected at a time.

How do I achieve this? 

I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this? 

```
    <style> 
    .teamSelected{
        background-color: red;
        border-radius: 4px;
    }
    </style>

    <div  onclick="toggleBackground(team1)"> 
            <div id="team1">
            </div>
    </div>
    <div  onclick="toggleBackground(team2)"> 
            <div id="team2">
            </div>
    </div> 
    <div  onclick="toggleBackground(team3)"> 
            <div id="team3">
            </div>
    </div>  

    <script>
       function toggleBackground(teamnumber) {
                var element = document.getElementById(teamnumber);
                    if (element) {
                        element.classList.toggle("teamSelected");  
                    }
                }
    </script> 

```

Thanks!