No event listener for x-editable table elements

I have a dynamic table, with one column set to have editable elements. Once the page is rendered, I can edit the entry in the first row, but thereafter none of the other rows have event listeners for the id: name. I can’t understand why. Here is my code:

$(document).ready(function(){
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';     

    //make name editable
    $('#name').editable();
    ... });

      <tbody>
        <?php foreach ($action_lists as $list_item) {
          echo "<tr>";
              echo "<td> <a href="#" id="name" data-pk="{$list_item["ActionList"]["list_index"]}" data-url="/post" data-type="text" data-placement="right" data-title="Enter new name." class="editable editable-click">{$list_item["ActionList"]["name"]}</a></td>";
          echo "</tr>";
        }?>
      </tbody>

Answer

$(‘#name’) will query the document based on id so it will return the first matched element so just use class name instead of id and use $(“.name”), Then it will apply to all the element