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>

$('#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