Modify X-editable templates on a per element basis (not globally)

I added a delete button to the X-editable form using the following script (live demo).

How can this be accomplished for only some elements (i.e. .editable-with-delete) and not globally?

$('.editable').editable();

$.fn.editableform.buttons += '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>';

$('.editable-with-delete').editable();


$("#list").on("click", "i.glyphicon-trash", function() {
  console.log('delete')
});

<h4>X-editable: display checklist as UL</h4>
<ul id='list'>
  <li class='editable-with-delete'>Editable element with delete</li>
  <li class='editable'>Editable element without delete</li>
  <li class='editable'>Editable element without delete</li>
</ul>

from Modify X-editable templates on a per element basis (not globally)