How to use bootstraps x-editable in table rows?

Question

I would like to use the bootstraps X-editable plugin. I retrieve server side data in my table and I would like to edit them in-line. As I see, X-editable is proposed to work with id's. Would be possible to handle this with multiple data?

The documentation:

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

$(document).ready(function() {
    $('#username').editable();
});

What about if I have more usernames?

Answer 1

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

change to

<a href="#" class="username">superuser</a>

And

$(document).ready(function() {
    $('#username').editable();
});

Change to

$(document).ready(function() {
    $('.username').editable();
});