How to set an id to elements created on the fly in KnockOutJS

Question

How to set an id to elements created on the fly in KnockOutJS. As you see I have two spans, one for the button, second one for the small icon on the corner of button(see image below). And all this for total of 6 elements. Now I dont know how to manage with css, cuz they have no unique ID.
What to do?

 [![enter image description here][1]][1] <script id="normal" type="text/html"> <div class="ItemIndicateur"> <span class="BuIndicateur" data-bind="text: $parent.CatFullName() == true ? CatNom : CatNomOnglet, click: $parent.ClickedItem, attr: { id : IdCat}" style="display:block; color: white; padding:10px" /> <span class="NbDemandeDiv" data-bind="text: NbDemandeIndicateur,visible: IsNbDemandeIndicateur, attr: { id : $parent.IdNbDemande()}"></span> </div> </script> 

 <div class="ListeIndicateur" data-bind="template: {name: GetItemTemplate, foreach: ListeIndicateur},"> 

Answer 1

Use the css binding provided by knockout.

http://knockoutjs.com/documentation/css-binding.html

1. Create a class in your CSS to that has the styles you want. You may need more than one depending on your needs

2. When an element meets a criteria apply the css class via the binding

[![enter image description here][1]][1]

<script id="normal" type="text/html">
    <div class="ItemIndicateur">
        <span class="BuIndicateur" data-bind="text: $parent.CatFullName() == true ? CatNom : CatNomOnglet, click: $parent.ClickedItem, attr: { id : IdCat}" style="display:block; color: white; padding:10px" />
        <span class="NbDemandeDiv" data-bind="text: NbDemandeIndicateur,visible: IsNbDemandeIndicateur, attr: { id : $parent.IdNbDemande()}, css: {'color1': NbDemandeIndicateur < 3, 'color2': NbDemandeIndicateur < 10}"></span>
    </div>
</script>