estoy tratando de mostrar una entrada de acuerdo con el valor de una lista desplegable con Symfony

mi cuadro de selección

 ->add('specialite', ChoiceType::class, [ 'attr' => ['class' => 'form-control mb-3'], 'label' => 'Speciality', 'choices' => array( 'Select' => null, 'Nurses' => 'nurses', 'Doctors' => 'Doctors', 'Engineers' => 'Engineers', 'IT-Specialist' => 'IT-Specialist', 'Anesthetist technicians' => 'Anesthetist technicians', 'Others' => 'Others', ), 'choice_attr' => [ 'Select' => ['disabled'=>'disabled'], ] ])

cuando el usuario selecciona otros, se le muestra otro campo, también estoy intentando con este código

tipo de formulario

 ->add('otherspec', TextType::class, [ 'attr' => ['class' => 'form-control mb-3'], 'label' => null, ])

html.ramita

 <script> let foo = document.getElementById("emplopyer_specialite"); let bar = document.getElementById("emplopyer_otherspec"); foo.addEventListener('change', (event) => { if (event.target.value === 'Others') { bar.style.display = 'none'; // Hide the element. } else { bar.style.display = 'inline'; // Show the element. } }); </script>

Mi problema, mi problema es cuando selecciono cualquier valor del cuadro de selección, aparece el segundo campo, sin embargo, quiero que aparezca cuando selecciono el valor = "otro"

Gracias