```
<tbody data-bind="foreach: hearings">
    <tr>
            <td><span data-bind="text: ID, event: { mouseover: $parent.displayHearingsCaseID }" class="hearingIDCell"></span></td>
    </tr>
</tbody>

```

On mouse over event of the span element, I am generating content dynamically that I want to show on popover.
Since the span element will have same id/class for all the records, the popover is showing same content for all the rows. How can I display different content for all the rows ?

```
$('.hearingIDCell').popover({ trigger: 'hover', content: caseIDString, title: "Case ID" });

```

The value for string caseIDString is generated for every row.