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.

$('#note').editable({ validate: function(value) { if($.trim(value) == '') return 'Value is required.'; }, type: 'wysihtml5', title: 'Edit Comment', placement: 'top', send:'always', ajaxOptions: { dataType: 'json', type: 'post' } }); $('#pencil').click(function(e) { e.stopPropagation(); e.preventDefault(); $('#note').editable('toggle'); });

And the HTML

<div id="note" class="note" data-type="wysihtml5" data-toggle="manual" data-pk="{{ $each_comment->id }}" data-placement="top" data-url="{{ url($each_comment->post_id . '/comment/update') }}"> {!! $each_comment->comment !!} </div> <a href="#" id="pencil" class="pencil" data-type="wysihtml5" data-toggle="manual" data-pk="{{ $each_comment->id }}" data-placement="top" data-url="{{ url($each_comment->post_id . '/comment/update') }}"> <i class="icon-pencil" style="padding-right: 5px"></i>[edit] </a>

UPDATE

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

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

And I call it with a.pen

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

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.