javascript - Why would html text field not respond to input after a jQuery show/hide

Question

The code is structured such that the html input field shows if a select value on change equals a value as preferred and it works fine. The challenge is that the text field shown does not accept any input values on smaller devices

How can I make this work?

HTML

<div class="col-md-4">
    <label> Issue To <span class="text-danger">*</span> </label>
    <select name="issued_to" class="form-control" id="issued_to">
        <option value='' selected> -- Please Select -- </option>
        <option value="student"> Registered Student </option>
        <option value="other"> Other </option>
    </select>
</div>

<div class="col-md-4">
   <label> Student / Bearer <span class="text-danger">*</span> </label>
   <select name="student_id" id="student_id" class="form-control student_id">
      <option value='' selected> -- Please Select -- </option>
   </select>
   <input name="bearer_name" class="form-control bearer_name" type="text">
</div>

Javascript

<script>

    $(function(){

        $('.bearer_name').hide();
        $('.student_id').show();

        $('#issued_to').change(function(){
           
            if( this.value == 'student'){
                 $('.bearer_name').hide(); //hide input
                 $('.student_id').show(); //show select
            }
                
            if( this.value == 'other'){
                 $('.bearer_name').show(); // show input works but does not show characters as typed on the keyboard
                 $('.student_id').hide();
            }
                
            })
    });

</script>

question from:https://stackoverflow.com/questions/65940353/why-would-html-text-field-not-respond-to-input-after-a-jquery-show-hide

Answer 1

Waitting for answers