dynamic auto-complete input field

I am using Materialize as a front-end framework for my project.

I have used their auto-complete input field for this purpose and I am providing the data for that auto complete input field through JSON. It is working fine but now I want to add another autocomplete input-field like that and I am using jquery’s append method for that.

I am getting the structure for the input field but unfortunately the dropdown isn’t showing up. When i inspected the elements in the browser, I saw that the dropdown for the dynamically generated input field is not showing up. Below is the code for the input field.

HTML and CSS

<div class="row">
    <div class="col s4 offset-s4">
        <a class="btn grey darken-3 squared left" id="add">add</a>
    </div>
</div>
<div class="row" id="dynamic">
    <div class="col s2 offset-s2">
        <input type="text" id="autocomplete-input" class="autocomplete input-item" name="item">
    </div>
</div>

JAVASCRIPT

<script>
$(document).ready(function(){
    var i = 1;
    $("#add").click(function(){
        i++;
        $('#dynamic').append('<div class="col s2"><input type="text" id="autocomplete-input" class="autocomplete input-item" name="item"></div>');
    });
});

Any help would be appreciated.