im trying to display an input according to the value of a drop-down list with symfony

my select box

->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'],
                ]
                
            ])

when the user select others , another field it displayed to him , im trying also with this code

form type

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

html.twig

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

My problem my problem is whene i select any value of the select box , the second field appear , however i want it appear when i select the value="other"

thanks