Нужно чтобы при выборе пункта селектора "Другое" появлялось еще одно поле.
 

Здравствуйте. Ника не могу понять как сделать вроде бы простую вещь. Прочитал много в интернете, но все никак не могу "уговорить" элемент работать как нужно.

Есть вот такой кусок кода:

<div class="col-md-6">
  <label for="inputState" class="form-label px-4">Должность</label>
  <select name="inputState" id="inputState" class="form-select px-4">
    <option></option>
    <option value="Должность 1">Должность 1</option>
    <option value="Должность 2">Должность 2</option>
    <option value="Должность 3">Должность 3</option>
    <option value="Должность 4">Должность 4</option>
    <option value="Должность 5">Должность 5</option>
    <option value="Другое">Другое</option>
  </select>
</div>
<div class="col-md-6">
  <label for="hand_input" class="form-label">Введите вашу должность</label>
  <input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
</div>
<div class="col-12">
  <button type="submit" class="btn btn-primary">Следующий шаг</button>
</div>

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

<div class="col-md-6">
  <label for="inputState" class="form-label px-4">Должность</label>
  <select name="inputState" id="inputState" class="form-select px-4">
    <option></option>
    <option value="Должность 1">Должность 1</option>
    <option value="Должность 2">Должность 2</option>
    <option value="Должность 3">Должность 3</option>
    <option value="Должность 4">Должность 4</option>
    <option value="Должность 5">Должность 5</option>
    <option value="Другое">Другое</option>
  </select>
</div>
<div class="col-md-6 other-form" hidden>
  <label for="hand_input" class="form-label">Введите вашу должность</label>
  <input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
</div>
<div class="col-12">
  <button type="submit" class="btn btn-primary">Следующий шаг</button>
</div>

document.addEventListener('DOMContentLoaded', () => {
  const otherForm = document.querySelector('.other-form');

  document.getElementById('inputState').addEventListener('change', ({ currentTarget }) => {
    otherForm.hidden = currentTarget.value !== 'Другое';
  });
});

Почему-то не работает... Вставляю в код в конце формы вот так:

<div class="col-md-6">
              <label for="inputState" class="form-label px-4">Должность</label>
              <select name="inputState" id="inputState" class="form-select px-4">
                <option></option>
                <option value="Должность 1">Должность 1</option>
                <option value="Должность 2">Должность 2</option>
                <option value="Должность 3">Должность 3</option>
                <option value="Должность 4">Должность 4</option>
                <option value="Должность 5">Должность 5</option>
                <option value="Другое">Другое</option>
              </select>
            </div>
            <div class="col-md-6 other-form" hidden>
              <label for="hand_input" class="form-label">Введите вашу должность</label>
              <input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">Следующий шаг</button>
            </div>
           <script>
            document.addEventListener('DOMContentLoaded', () => {
              const otherForm = document.querySelector('.other-form');
            
              document.getElementById('inputState').addEventListener('change', ({ currentTarget }) => {
                otherForm.hidden = currentTarget.value !== 'Другое';
              });
            });
           </script>

На странице все равно не появляется пункт "Введите вашу должность" ((( https://disk.yandex.ru/i/VDlMz5vsiFKqtg

С чем может быть связано?

Может я куда-то не туда вставляю код?

Вроде все работает

<div class="col-md-6">
              <label for="inputState" class="form-label px-4">Должность</label>
              <select name="inputState" id="inputState" class="form-select px-4">
                <option></option>
                <option value="Должность 1">Должность 1</option>
                <option value="Должность 2">Должность 2</option>
                <option value="Должность 3">Должность 3</option>
                <option value="Должность 4">Должность 4</option>
                <option value="Должность 5">Должность 5</option>
                <option value="Другое">Другое</option>
              </select>
            </div>
            <div class="col-md-6 other-form" hidden>
              <label for="hand_input" class="form-label">Введите вашу должность</label>
              <input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">Следующий шаг</button>
            </div>
           <script>
            document.addEventListener('DOMContentLoaded', () => {
              const otherForm = document.querySelector('.other-form');
             
              document.getElementById('inputState').addEventListener('change', ({ currentTarget }) => {
                otherForm.hidden = currentTarget.value !== 'Другое';
              });
            });
           </script>

Код надо вставлять туда, куда обычно вставляются скрипты.
В <head> как код или в отдельный файл или в конец <body>