Jquery templates and data-for

Question

I am building a table of repeating information for my site, and control, showing and hiding individual sections using an icon. Now, for hard coded instances, I can use the following:

  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user">
       <i class="glyphicon glyphicon-chevron-down text-muted"></i>
   </div>

Which is linked to the following div:

 <div class="row user-infos user">
   .....table content
 </div>

So, my question is, how can i specify a unique data-for attribute for each iteration. Something like this:

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user1">
    <i class="glyphicon glyphicon-chevron-down text-muted"></i>
</div>
<div class="row user-infos user1">
   .....table content for user 1
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user2">
    <i class="glyphicon glyphicon-chevron-down text-muted"></i>
</div>
<div class="row user-infos user2">
   .....table content for user 2
</div>
........

All the data is populated using Jquery templates, so my variables are in the format of: ${somevalue};

EDIT

Should note that i am iterating over my data set via Ajax success:

  $.each(msg.d, function(index, item) {
      $('#usertmpl').tmpl(item).appendTo('#results');
  });

and my template:

<script id="usertmpl" type="text/x-jquery-tmpl">
        <table class="table table-user-information" id="approveScroll" style="height: 100px;">
            <tbody>
                <tr>
                    <td>
                        <span><i class="glyphicon glyphicon-user"  data-toggle="tooltip" data-original-title="approved by"></i> ${UserName}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="approvedDate"><i class="glyphicon glyphicon-time" data-toggle="tooltip" data-original-title="approved date"></i> ${parseJsonDate(EnteredDate)}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="approveComment"><i class="glyphicon glyphicon-comment" data-toggle="tooltip" data-original-title="comment"></i> ${Comment}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </script>

this all gets appended to a containing DIV.

EDIT

Answer 1

You can design unique key by using ${$index} like;

<script type="text/x-jquery-tmpl" id="jqTpl">
    {{each data.users}}
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user${$index +1}">
      <i class="glyphicon glyphicon-chevron-down text-muted"></i>
    </div>
    <div class="row user-infos user${$index +1}">
         User${$index +1}
    </div>
    {{/each}}
</script>


<script type="text/javascript">
 var json={
     "data": {
         "users": [
             3,
             2,
             1
         ]
     }
 }   
</script>

For show this template in page;

$( "#jqTpl" ).tmpl( json ).appendTo( "body" )

You can see working demo here: http://jsfiddle.net/huseyinbabal/eQbvT/2/

On demo, inspect element and see class names are unique

Update: For tooltip fix add following;

$('i[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
});

Here is working demo: http://jsfiddle.net/huseyinbabal/eQbvT/1/