Bootstrap 3 popovers not moving along with elements

Question

I am new to front end development and I am really seeking for the solution.

Basically I have this input fields in the page and validated each of them using ajax. Now, if something is wrong with the texts inputted to the element, I returned a validation error from the backend and let the frontend show a popover. I also have a form which prepends new fields to the top of my table.

So the scenario is a popover is already shown in the top row of the table. Whenever a new row is added (dynamically) to the table, the popover should go with the previous row attached to it ( which is now the second row of the table ).

Expected result: Popover should go along with the second row.

Actual Result: the popover stay at the first row telling me a user that the first row has validation errors.

EDIT ( the code )

// JS Triggered by ajax success where validation error is returned
var $el = $("#email");
$el.popover({
  content: "Invalid value!",
  placement: 'top',
  container: 'body'
});

// html 
<tr>
  <td> <input id="email"  type="text" value="something*#@email.com"/> </td>
</tr>

PS: sorry for my bad english.

Thanks!

Answer 1

If you want to achieve this, just add this to your input

rel="popover"