Iterating checkboxes using {{#each}}

I have the following code`

{{#each item}}

<p class="center">
 <input type="checkbox"  checked="checked" id="basiccbox" name={{id}} />
 <label for="basiccbox"> &nbsp;</label>
</p>

{{/each}}

Multiple check boxes is now rendered. However, when i click any of the box, only the first check box toggles between the true or false states. This happens because of the

for=“basiccbox”

and

id=“basiccbox”

i.e all box that is rendered have the same Id. How do i generate unique ids or how does one deal with such a situation.

{{#each item}}

<p class="center">
 <input type="checkbox"  checked="checked" id="{{item.id}}" name="{{item.name}}"/>
 <label for="basiccbox">{{item.label}}</label>
</p>
{{/each}}
2 Likes

this concept Works, however for and id should be the same tag

{{#each item}}

<p class="center">
 <input type="checkbox"  checked="checked" id="{{item.id}}" name="{{item.name}}"/>
 <label for="{{item.id}}">{{item.label}}</label>
</p>
{{/each}}

Also fixed missing }