Multiple input fields with same #id isn't working.

[sabbir74746]

But when I use individual id for each input field then it works perfectly. Is there any other way to fix that?

var input = document.getElementById("list_1"); var awesomplete = new Awesomplete(input, { list: ["one", "two", "three", "four", "five"], minChars: 1 }); var input = document.getElementById("list_2"); var awesomplete = new Awesomplete(input, { list: ["one", "two", "three", "four", "five"], minChars: 1 });

When I write the code like this it's working.

Also, I'm using this code inside the contact form 7. But when I move the code into a js file then it stops working. Is there anyone?

[julian-tr]

You can't have multiple elements with the same ID in the same page - IDs must be unique.

See: https://www.w3schools.com/html/html_id.asp

[sabbir74746]

You can't have multiple elements with the same ID in the same page - IDs must be unique.

See: https://www.w3schools.com/html/html_id.asp

Is there any function to use all unique id in jquery?

[SvenMoenig]

Is there any function to use all unique id in jquery?

You can use CSS-classes instead of IDs.

Example: html:

<input class="field-group-1" id="field1"/>
<input class="field-group-1" id="field2"/>
<input class="field-group-1" id="field3"/>

getting all three elements in vanilla JS with getElementsByClassName:

let fieldGroup1 = document.getElementsByClassName("field-group-1");

... with querySelectorAll:

let fieldGroup1 = document.querySelectorAll(".field-group-1");

... with jQuery:

let fieldGroup1 = $(".field-group-1");