(There is one similar question I found [here](https://stackoverflow.com/questions/26964140/bootstrap-popover-only-works-on-the-first-item) but I don't think the answer applies to me, or if it does I don't understand how to implement it)

To start, I should say I am not a programmer or designer, I used an open source template made with Bootstrap (called Grayscape) to put up my own site. Meaning: I have no idea what I'm doing. But I try my best and try to read up and learn as I go.

However, I can't figure this out. You'll see on a [test version](http://www.matthewpearl.com/indextest.html#) of my page that there are book covers in the third section (it's a one page layout). I want popovers for each book cover. The first cover's popover works. But only the first one works. Even though the code is the same for the others (I've only put code for the next two book covers, so far).

In the JS script I have this initialization:

```
$(document).ready(function(){
$(function() {
$('.bookovers').popover();
});

```

and then at the bottom before the last body tag I have:

```
$('#popover').popover();

```

Then around the items that have the popovers I have:

```
<a id="popover" class="btn" rel="popover" data-content="Summary text."
              title="title text"
              data-html="true"></a>

```

It wouldn't be hard to confuse me. However, this is one of the last things I need to do to have this page set up and running, and I just can't for the life of me figure out or find why only the first popover works. I experimented and did a popover earlier in the page on some text, and, again, only the first one worked (in other words, the one that had been first, on the first cover, and was now the second one, no longer worked). Any help would be greatly appreciated, but please note I would probably need pretty specific guidance.

Thanks!