Popover is not working for json multiple values - json

Question

[
{
"id" : 1,
"name" : "clevin",
"description" : "Version 1 : some desc",
"info" : [{
"id" : 2,
"name" : "abc",
"size" : "5 GB",
"used" : "25%"
},
{
"id" : 3,
"name" : "def",
"size" : "10 GB",
"used" : "15%"
},
{
"id" : 4,
"name" : "ghi",
"size" : "20 GB",
"used" : "5%"
}],
}]
This is my json file. When ever i mouse over "info.name"[abc, def, ghi] popover will display "name", "size" and "used".
but my issue is "abc" is the first value , when ever i mouseover it display value as expected. but when i mouseover "def" and "ghi" nothing is happened :(.
<ul type="none">
<li>
<label id="vol-label" class="muted">Info :</label>
{{#info}}
<span id="value"><a><u>{{name}}</u></a></span>
<span id="info-popover-title" class="hide">{{name}}</span>
<div id="info-popover-content" class="hide">
<p>Size : {{size}}</p> <p> Used : {{used}}</p><p> Status : {{status}}</p>
</div>
{{/info}}
</li>
</ul>
This is my template(mustache).
following is my view part(backbone.js)
events: {
"mouseenter #value" : "showDetails",
"mouseleave #value" : "hideDetails" ,
},
showDetails : function() {
this.$("#value").popover({
html : true,
title: function() {
return $("#info-popover-title").html();
},
content: function() {
return $("#info-popover-content").html();
}
});
this.$("#value").popover('show');
},
hideDetails : function() {
this.$("#value").popover('hide');
},
Please see my both screen shot to understand the issue. In fist screens hot see am getting all json info values "abc" "def" and "ghi" . in 2nd screen shot if i mouse over am getting "abc" values. but "def" and "ghi" value is not at all displaying. am not figure it out what is the issue :(.
I need to popove "def" and "ghi" values also. But i think something is wrong in my logic. Thanks in advance. This is really a rare issue for me might be others also.
If i use class insted of id following is the screen shot :(

Answer 1

2 things that you need to change here. First, is to use class to define for popovers instead of id. And the second is to abstract each <li> into its own view. Currently, you have one view that loops through the entire collection. All your events are currently tied to this one view. Doing those things I mentioned should fix this issue.
You can do something like this to have the become its own view which carries it's own sub-element. Just wrote this quickly and haven't tested but the idea is something like this. I'm not really sure which popover library you're using but the idea is generally the same.
Edit: Didn't realized you were using Mustache/Handlebars, so here's the JS Fiddle. Code

Answer 2

Now if you try to call each object it should work.
var abc =
{
"id" : 1,
"name" : "clevin",
"description" : "Version 1 : some desc",
"info" : {
"id" : 2,
"name" : "abc",
"size" : "5 GB",
"used" : "25%"
}
};
var def =
{
"id" : 3,
"name" : "def",
"size" : "10 GB",
"used" : "15%"
};
var ghi = {
"id" : 4,
"name" : "ghi",
"size" : "20 GB",
"used" : "5%"
};
var output =
{
show : function()
{
return abc["info"];
}
};
console.log(output.show());