Autocomplete function from awesomeplete does not work in additionally created input fields by javascript

I have a html-form to read out data from a database. The form contains an autocomplete function from awesomeplete that shows the values from the database that can be choosen after entering at least 2 letters into the input field. This works fine!

Now, I have added the possibility to create additional input fields by using the following javascript function:

enter code here

    <script>
    var counter = 1;

    var limit = 10;

    function addInput(divName){

         if (counter == limit)  {

              alert("You have reached the limit of adding " + counter + "   
    inputs");

         }

         else {

              var newdiv = document.createElement('div');

              newdiv.innerHTML = '<br><input type="text" 
    id="productinput11" name="productinput[]" class="awesomplete" 
    list="productinputselect" size="20"/>';

              document.getElementById(divName).appendChild(newdiv);

              counter++;

         }

    }
    </script>

         <div id="dynamicInput">
         <b></b><input type="text" id="productinput11" name="productinput 
    []" class="awesomplete" list="productinputselect" size="20"/>
         </div>
         <input type="button" value="Weiteres Eingabefeld" onClick="addInput
    ('dynamicInput');">

enter code here

The problem is now, that the autocomplete function from awesomeplete only works in the first input field of this function and no more in the additionally created input fields, although class="awesomplete" is present anywhere. How can make this function work in all added input fields?

Solution

Your Awesomplete is already loaded for all .awesomplete class elements.

If you add some, you have to re instantiate Awesomplete.

So, your else statment should be like this

function addInput(divName){
  if (counter == limit)  {
    [...]
  } else {
    // Create new div
    var newdiv = document.createElement('div');
    newdiv.innerHTML = '<br><input type="text" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/>';
    document.getElementById(divName).appendChild(newdiv);

    // Re instantiate Awesomplete
    new Awesomplete(newdiv.querySelector('input'), { list: document.querySelector('#productinputselect') });

    // Set counter
    counter++;
  }
}

Here a working exemple

var newdiv = document.createElement('div');
newdiv.innerHTML = '<br><input type="text" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/>';
document.body.appendChild(newdiv);

new Awesomplete(
	newdiv.querySelector('input'), 
  { list: document.querySelector('#productinputselect') }
);

<script src="https://leaverou.github.io/awesomplete/awesomplete.js"></script>
<datalist id="productinputselect">
	<option>Ada</option>
	<option>Java</option>
	<option>JavaScript</option>
	<option>Brainfuck</option>
	<option>LOLCODE</option>
	<option>Node.js</option>
	<option>Ruby on Rails</option>
</datalist>

By the way, I removed your id="" attribute in your new input element because ID attribute must be unique.

Answer based on the Awesomplete API documentation