x-editable popup does not display in correct position

Question

I am trying to use divs instead of a table, and allow the user to comment on each "row".

An example of my div structure is like this:

<div id="mytable">
<div id="line1" class="line preformatted">
    This is my whole entire line!
    <div id="popuplink">
        <a href="#" id="popup" aria-describedby="ui-tooltip-0" onclick="addComment(event)"><i class="icon-pencil"></i></a>
    </div>
</div>
</div>

With the editable being defined like so:

$('#popup').editable({
    toggle: 'manual',
    mode: 'popup',
    title: 'Enter comment',
    type: 'text',
    emptytext: '',
    placement: 'right',
    display: function(value, response) {
        return false;   //disable this method
    },
    success: function(response, newValue) {
        alert("success saving: " + newValue);
    }
});

And for some reason the x-editable popup will not display relative to the correct div, it keeps defaulting to the top left corner. How can I fix this?

see jsfiddle here: http://jsfiddle.net/H9Drf/7/

Edit: I think that the problem has to do with the id of "popup" being the same in each div. As in, if I click on the third line, and write something into the textbox and hit "Save", I can tell that the effect happened to the first line, which has the first occurrence of "id=popup". Still not sure where to go from here...

Answer 1

I got it to work once I gave the different x-editable items (the links inside the popuplink divs in my code) different IDs. See working solution at jsfiddle.net/H9Drf/9/