X-Editable Bootstrap field loads only on the first edit link

X-Editable Bootstrap field loads only on the first edit link

I'm using Bootstrap X-Editable along with bootstrap-wysihtml5

I have a comment list on every post page with an edit link under each comment.

But I can only edit the first comment on the last (the newest submitted comment) and the rest simply don't load the X-Editable field.

  1.                 $('#note').editable({
  2.                     validate: function(value) {
  3.                         if($.trim(value) == '')
  4.                             return 'Value is required.';
  5.                     },
  6.                     type: 'wysihtml5',
  7.                     title: 'Edit Comment',
  8.                     placement: 'top',
  9.                     send:'always',
  10.                     ajaxOptions: {
  11.                         dataType: 'json',
  12.                         type: 'post'
  13.                     }
  14.                 });
  15.                 $('#pencil').click(function(e) {
  16.                     e.stopPropagation();
  17.                     e.preventDefault();
  18.                     $('#note').editable('toggle');
  19.                 });

And the HTML

  1.     <div id="note"
  2.          class="note"
  3.          data-type="wysihtml5"
  4.          data-toggle="manual"
  5.          data-pk="{{ $each_comment->id }}"
  6.          data-placement="top"
  7.          data-url="{{ url($each_comment->post_id . '/comment/update') }}">
  8.         {!! $each_comment->comment !!}
  9.     </div>
  10.    
  11.     <a href="#"
  12.        id="pencil"
  13.        class="pencil"
  14.        data-type="wysihtml5"
  15.        data-toggle="manual"
  16.        data-pk="{{ $each_comment->id }}"
  17.        data-placement="top"
  18.        data-url="{{ url($each_comment->post_id . '/comment/update') }}">
  19.     <i class="icon-pencil" style="padding-right: 5px"></i>[edit]
  20.     </a>

UPDATE

I made some changes, I added a `pen` class to the edit link

  1. <a href="#" id="pencil" class="pen" data-pk="{{ $each_comment->id }}">[edit]</a>

And I call it with `a.pen`

  1.     ('a.pen').click(function(e) {
  2.         e.stopPropagation();
  3.         e.preventDefault();
  4.         console.log($('#note').attr("data-pk"));
  5.         $('#note').editable('toggle');
  6.     });

Now all edit links are loading the X-Editable field but they're all showing the same comment with id ` 142 ` which is the latest submitted comment.

console.log prints the same id whenever I click on the edit link.