HTML datalist tag is not working properly

Question

I am trying to make a password generator with HTML, CSS and JS. It allows user to pick their password length from a dropdown input field. However, somehow the datalist tag I have used for it, is not working. It shows the input field but not with the dropdown button. Any help would be nice. HTML Code

<form action="" class="my-form">
  <label for="browser">Password length: </label>
  <input list="passList" name="passList" id="passList">

  <datalist id="passList">
                <option value="8">
                <option value="10">
                <option value="12">
                <option value="14">
                <option value="16">
                <option value="18">
   </datalist>
</form>

Answer 1

OK, I have figured it out, 2 elements cannot have the same id so that is why it is not working.

The input tag and datalist tag have same id so it causes trouble so in order for that to work, I have changed the id of input tag.