Cliccando su uno dei 5 div interni a classe ".parent" venga applicata la classe CSS "selected" solo all'elemento cliccato, togliendolo agli altri div presenti... MI potete aiutare per favore?

io ci ho provato ma non mi esce correttamente come vorrei questo è il mio codice :

<script>

function getValue(id) {

document.getElementById('pippo').classList.remove( 'selected');

document.getElementById(id).classList.add('selecte d');

}

</script>

<style type="text/css">

.selected {
color: white;
background-color: black;
display: inline-block;
padding: 3px;
}

</style>

<div id="pippo" class="parent">

<div id="myHeader1" onClick="getValue('myHeader1')" class="one">one</div>
<div id="myHeader2" onClick="getValue('myHeader2')" class="two">two</div>
<div id="myHeader3" onClick="getValue('myHeader3')" class="three">three</div>
<div id="myHeader4" onClick="getValue('myHeader4')" class="four">four</div>
<div id="myHeader5" onClick="getValue('myHeader5')" class="five selected">five</div>

</div>