Динамическая форма с автозаполнением использования jQuery

Question

Я использую Django-фреймворк для моего проекта. Я хочу "добавить" форму ниже старой формы. Форма содержит поле ввода, которое может "автозаполнение" использовать jQuery. Это мой код...

HTML

<div id="history_education_form">

  <div id="1" class="his_edu">

    <div class="row">
      <div class="col-sm-12">
        <div class="input-group">
          <span class="input-group-addon">
            <i class="material-icons">school</i>
          </span>
          <div class="form-group label-floating">
            <label class="control-label">Institute Name</label>
            <input type="text" class="form-control" name="edu_instituteName" id="institute2">  //This is the  Autocomplete that I want to add
          </div>
        </div>
      </div>
      <div class="col-md-12 text-center">
        <button type="button" id="1" class="btn btn-simple btn-xs btn_hisedu_remove"><i class="material-icons md-18 icon-delete">delete</i></button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-12 text-center">
  <div class="form-group">
    <div class="col-md-12">
      <p><button type="button" id="add_hisedu" class="btn btn-simple">Add More Institute</button></p>
    </div>
  </div>
</div>

Скрипт в HTML

<script>
  $( function() {
    $( "#institute2" ).autocomplete({
      source: "{% url 'get_institute' %}",
            minLength: 1,
    });
  } );
  </script>

Это код JS для добавления новой формы ниже старой формы

$(document).ready(function(){
  var i=1;
  $('#add_hisedu').click(function(){
    i++;
    var j=i+1;
    var append_text = '';

    // Head (Filter Select + Add More button)
    append_text += 'bra....bra...<input type="text" class="form-control" name="edu_instituteName" id="institute'+j+'"bra... bra...';


    $('#history_education_form').append(append_text);
    $( "#institute"+j ).each(function(){
      $(this).autocomplete({
        source: "{% url 'get_institute' %}",
        minLength: 1,
      });
    });

  });

  // Remove w/ Jquery Style
  $(document).on('click', '.btn_hisedu_remove', function(){
    var button_id = $(this).attr("id");
    $.confirm({
      title: 'Delete this History Education ?!',
      content: "Are you sure?",
      buttons: {
        YES: function(){
          $('#'+button_id+'').remove();
        },
        NO: function(){
        }
      }
    });
  });
});

Я использую "Append" для добавления HTML-кода в div (id="history_education_form") и изменяю имя автозаполнения ввода на "Add i", которое будет учитываться при нажатии "Add More Institute"

И я добавляю скрипт, чтобы связать автозаполнение jQuery с тем же идентификатором, который я добавляю

Отображение при нажатии кнопки "Добавить" работает, но автозаполнение нового ввода не работает. Понятия не имею как это исправить, помогите пожалуйста