How to use ember-power-select in {{#each}} block - ember.js

Question

I am generating ember-power-select box using {{#each}} block in hbs template as shown in the code below.
{{#each hps as |hp|}}
{{#power-select
search=(action "searchRepo")
selected=selected
onchange=(action (mut selected))
as |repo|
}}
{{repo.name}}
{{/power-select}}
{{/each}}
The above code generates two select boxes. But when I select a value in the first box,the same value gets replicated in the second box too.
What is the way to differentiate the two select boxes?

Answer 1

This works for me
// Controller
roles: ['Project Manager', 'Tech Lead', 'Member'],
<ul>
{{#each user.projectRoles as |projectRole|}}
<li>
<label>{{projectRole.project}}</label>
{{#power-select selected=projectRole.role options=roles onchange=(action (mut projectRole.role)) as |role|}}
{{role}}
{{/power-select}}
</li>
{{/each}}
</ul>

Answer 2

The only thing I can think of that may work is declaring selected as an array and bind every power select selected property to the correspondent index of the hp array.
For example, assuming you're using a component:
import Ember from 'ember';
export default Ember.Component.extend({
selected: Ember.A()
});
Then, in your component template:
{{#each hps as |hp hp_index|}}
{{#power-select
search=(action "searchRepo")
selected=selected.[hp_index]
onchange=(action (mut selected))
as |repo|
}}
{{repo.name}}
{{/power-select}}
{{/each}}

Answer 3

This is mainly happening of because you are assigning same as |repo| in both of the select statements so whenever you change one it is reflecting in the both.
{{#power-select}}do not have option like this better you try with some other one
or
else you define two {{#power-select}} with different as |repo2|