[voraa]

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

<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>