jQuery UI自动完成并在多个字段上可编辑

Question

我使用的是JQUERY UI自动完成功能和可编辑的，并且效果很好。

这是我的代码：

HTML

<span class="MyEditable" id="id1" style="cursor: pointer">test</span>

脚本第1部分

$.editable.addInputType('autocomplete', {
   element : $.editable.types.text.element,
   plugin : function(settings, original) {
      $('input', this).autocomplete({
         source: function(request, response) {
            $.getJSON(
               "includes/get.php",
               { term:request.term, type: 'id1' }, 
               response
            );
         },
         minLength: 3,
         select: function(event, ui) {
            $(".MyEditable").val(ui.item.value);
         }
      }).data("ui-autocomplete")._renderItem = function( ul, item ) {
         return $( "<li class='ui-autocomplete-row'></li>" )
            .data( "item.autocomplete", item )
            .append( item.label )
            .appendTo( ul );
      };

      $('ul li a').click(function(){
            $('li a').removeClass("active");
            $(this).addClass("active");
      });                                        
   }
}); 

脚本第2部分

$(".MyEditable").editable("includes/save.php", {
  type   : 'autocomplete',
  submit : 'OK',
  cancelcssclass : 'btn btn-danger',
  submitcssclass : 'btn btn-success',
  cancel : 'Annuler',
  submitdata: function () {
     return { my_id: <?php echo $row['id'] ?> };
  }
});

我现在想添加另一个具有自动完成功能的可编辑字段

<span class="MyEditable" id="id2" style="cursor: pointer">test 2</span>

第2部分可以与其他类名重复，但是有一种方法可以修改第1部分，以便它可以处理多个字段？

我是JQuery的初学者。