Issue with duplicate fields and autocomplete

Issue with duplicate fields and autocomplete

Hello,

I have a form with duplicate fields including autocomplete input. 
The issue is : when i duplicate the fields, the autocomplete doesn't work on the new fields. 
I spent time googling my issue and often it's a clone('true') issue, which i don't use already and still have the problem. 
Can you help me please ? 

I made a JSFiddle :  https://jsfiddle.net/vqnaedvx/
Try with the letter j or s 

HTML :

  1.  
  2. <div id="projects" class="content">    
  3.     <button type="button" id="btnAdd" class="btn btn-primary btn-sm">Add Project</button>   
  4.     <div class="row form-group group">
  5.       <input class="project-label">
  6.       <input type="hidden" class="project-id">
  7.       <button type="button" class="btn btn-danger btnRemove">Remove</button>
  8.     </div>
  9. </div>

JS Multifield : 
  1. /**
  2.  * jQuery Multifield plugin
  3.  *
  4.  * https://github.com/maxkostinevich/jquery-multifield
  5.  */

  6. ;(function ( $, window, document, undefined ) {
  7. // our plugin constructor
  8. var multiField = function( elem, options ){
  9. this.elem = elem;
  10. this.$elem = $(elem);
  11. this.options = options;
  12. // Localization
  13. this.localize_i18n={
  14.         "multiField": {
  15.           "messages": {
  16.             "removeConfirmation": "Are you sure you want to remove this section?"
  17.           }
  18.         }
  19.       };

  20. this.metadata = this.$elem.data( 'mfield-options' );
  21. };

  22. // the plugin prototype
  23. multiField.prototype = {

  24. defaults: {
  25. max: 0,
  26. locale: 'default'
  27. },

  28. init: function() {
  29. var $this = this; //Plugin object
  30. // Introduce defaults that can be extended either
  31. // globally or using an object literal.
  32. this.config = $.extend({}, this.defaults, this.options,
  33. this.metadata);

  34. // Load localization object
  35.       if(this.config.locale !== 'default'){
  36.   $this.localize_i18n = this.config.locale;
  37.       }

  38. // Hide 'Remove' buttons if only one section exists
  39. if(this.getSectionsCount()<2) {
  40. $(this.config.btnRemove, this.$elem).hide();
  41. }

  42. // Add section
  43. this.$elem.on('click',this.config.btnAdd,function(e){
  44. e.preventDefault();
  45. $this.cloneSection();
  46. });

  47. // Remove section
  48. this.$elem.on('click',this.config.btnRemove,function(e){
  49. e.preventDefault();
  50. var currentSection=$(e.target.closest($this.config.section));
  51. $this.removeSection(currentSection);
  52. });

  53. return this;
  54. },


  55. /*
  56. * Add new section
  57. */
  58. cloneSection : function() {
  59. // Allow to add only allowed max count of sections
  60. if((this.config.max!==0)&&(this.getSectionsCount()+1)>this.config.max){
  61. return false;
  62. }

  63. // Clone last section
  64. var newChild = $(this.config.section, this.$elem).last().clone().attr('style', '').attr('id', '').fadeIn('fast');


  65. // Clear input values
  66. $('input[type=text],input[type=hidden],textarea', newChild).each(function () {
  67. $(this).val('');
  68. });

  69. // Fix radio buttons: update name [i] to [i+1]
  70. newChild.find('input[type="radio"]').each(function(){var name=$(this).attr('name');$(this).attr('name',name.replace(/([0-9]+)/g,1*(name.match(/([0-9]+)/g))+1));});
  71. // Reset radio button selection
  72. $('input[type=radio]',newChild).attr('checked', false);

  73. // Clear images src with reset-image-src class
  74. $('img.reset-image-src', newChild).each(function () {
  75. $(this).attr('src', '');
  76. });

  77. // Append new section
  78. this.$elem.append(newChild);

  79. // Show 'remove' button
  80. $(this.config.btnRemove, this.$elem).show();
  81. },

  82. /*
  83. * Remove existing section
  84. */
  85. removeSection : function(section){
  86. if (confirm(this.localize_i18n.multiField.messages.removeConfirmation)){
  87. var sectionsCount = this.getSectionsCount();

  88. if(sectionsCount<=2){
  89. $(this.config.btnRemove,this.$elem).hide();
  90. }
  91. section.slideUp('fast', function () {$(this).detach();});
  92. }
  93. },

  94. /*
  95. * Get sections count
  96. */
  97. getSectionsCount: function(){
  98. return this.$elem.children(this.config.section).length;
  99. }

  100. };

  101. multiField.defaults = multiField.prototype.defaults;

  102. $.fn.multifield = function(options) {
  103. return this.each(function() {
  104. new multiField(this, options).init();
  105. });
  106. };

  107. })( jQuery, window, document );

  108. $('#projects').multifield({
  109.   section: '.group',
  110.   btnAdd:'#btnAdd',
  111.   btnRemove:'.btnRemove'
  112. });  
  113.  

JS Autocomplete : 
  1.    $( function() {
  2.     var projects = [
  3.       {
  4.         value: "jquery",
  5.         label: "jQuery"
  6.       },
  7.       {
  8.         value: "jquery-ui",
  9.         label: "jQuery UI"
  10.       },
  11.       {
  12.         value: "sizzlejs",
  13.         label: "Sizzle JS"
  14.       }
  15.     ];
  16.  
  17.     $( ".project-label" ).autocomplete({
  18.       minLength: 0,
  19.       source: projects,
  20.       focus: function( event, ui ) {
  21.         $( ".project-label" ).val( ui.item.label );
  22.         return false;
  23.       },
  24.       select: function( event, ui ) {
  25.         $( ".project-label" ).val( ui.item.label );
  26.         $( ".project-id" ).val( ui.item.value );
  27.  
  28.  
  29.         return false;
  30.       }
  31.     })
  32.     .autocomplete( "instance" )._renderItem = function( ul, item ) {
  33.       return $( "<li>" )
  34.         .append( "<div>" + item.label + "</div>" )
  35.         .appendTo( ul );
  36.     };
  37.   } );