x-editable not clickable from the second entry of the list to the end

Question

I am working with x-editable for bootstrap 3, and it works nice but only for the elements in the first row.

I have a MySQL with this structure:

id/img_name/name/description/gallery

In admin.php I have the unordered list of my results:

$queryList = "SELECT * FROM images WHERE gallery = '$gallery' ORDER BY id DESC";
$result_selectList = mysqli_query($dblink, $queryList); 

while($row = mysqli_fetch_array($result_selectList)) {
    $id = $row['id'];
    $image  = $row['img_name'];                 
    $name  = $row['name'];
    $description  = $row['description'];
    $gallery  = $row['gallery'];
?>
    <li id="item_<?php echo $id; ?>">
        <img src='../../upload/galleries/<?php echo $gallery; ?>/<?php echo $image; ?>'  />
        <span>Image name:</span> <a href="javascript:void(0);" id="name" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter name"><?php echo $name; ?></a>
        <span>Description:</span> <a href="javascript:void(0);" id="description" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter description"><?php echo $description; ?></a>

    ...............
    ...............
    </li>

And this is the Javascript to enable x-editable:

//turn to inline mode
$.fn.editable.defaults.mode = 'popup';

$(function() {
    $('#name').editable();
    $('#description').editable();
});

The click on the field I want to modify is working fine, but only for the first result group. When I click on the second one, the popup not appear.

Any ideas?

UPDATE: Seems that this automated code

class="editable editable-click"

is added only in the first group.

Answer 1

ids must be unique in a document. You have n number of id="name" and id="description

<span>Image name:</span> <a href="javascript:void(0);" id="name" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter name"><?php echo $name; ?></a>
<span>Description:</span> <a href="javascript:void(0);" id="description" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter description"><?php echo $description; ?></a>

so the $('#name').editable();/$('#description').editable(); will only bind to the first id instance

Change them to classes

<span>Image name:</span> <a href="javascript:void(0);" class="name" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter name"><?php echo $name; ?></a>
<span>Description:</span> <a href="javascript:void(0);" class="description" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter description"><?php echo $description; ?></a>

and bind to the classes

$(function() {
    $('.name').editable();
    $('.description').editable();
});