How to remove class from other elements in emberjs - ember.js

Question

my functions toggles the class name on click to an element. But It's not remove the class names from other elements. so all elements are highliting now. But whenever user click on an element, it should have the classname rest of siblings has to removed the classname how do do this?
here is my try but not works:
import Ember from 'ember';
export default Ember.Component.extend({
isSelected : false,
deSelectOthers : function(){
this.set( "isSelected", false ); //deselecting all before add the class to clicked element
},
actions : {
selectCard : function(card) {
this.deSelectOthers(); //de select others not works
this.toggleProperty('isSelected'); // add class to this element only works. how to remove class from other element?
}
}
});
UPDATE
I am sorry for bad description about my requirement. I have created the requirement using jQuery - simply how to achive the same with emberjs?
Demo-Requirement

Answer 1

Here is the working twiddle
You need to maintain selectedIndex/value and use if check to update class based on the selectedIndex/value.
application.hbs
<div class="parent">
<ul>
{{#each model as | temp index|}}
<li class={{if (eq selectedIndex index) 'highlight' }} {{action 'changeSelectedIndex' index}}>{{temp}}</li>
{{/each}}
</ul>
</div>
routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return [1,2,3,4];
}
});
controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
selectedIndex:undefined,
actions:{
changeSelectedIndex(index){
this.set('selectedIndex',index);
}
}
});
You need to install ember-truth-helpers addon by running ember install ember-truth-helpers