JavaScript: раскрывающийся список при выборе «другого» активирует поле ввода рядом с ним.

Мое раскрывающееся меню работает, когда у меня есть только 1 строка полей ввода, но когда я нажимаю «добавить», чтобы добавить новую строку полей ввода, теперь это не работает.

Я хочу, чтобы новая строка, которую я добавляю, включала «Пожалуйста, укажите» всякий раз, когда я выбираю «другое».

Примечание: этот «Больничный» — это выпадающий список.

<table id = "main_table" class = "table">
                <thead>
                    <tr>
                        <td class = "border">No.</td>
                        <td class = "border">Name</td>
                        <td class = "border">Request Type</td>
                        <td class = "border">Add. Information / Comment</td>
                        <td class = "border">action</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class = "border"><center><span id = "itemNum" style = "font-size: 23px;">0</span></center></td>
                        <td><input type = "text" name = "" class = "form-control" name = "requestFor" placeholder = "Teacher's name" id = "floatingTextarea1"></td>
                        <td>
                            <div class = "row">
                                <div class = "col">
                                    <select name = "requestType" onclick = "checkRequestType()" id = "requestType" class = "form-control"  required>
                    
                                      <option value = "Sick leave">Sick leave</option>
                                    <option >Other</option>
                                  </select>
                                </div>
                                <div class = "col">
                                    <input type = "text" name = "requestType" id = "OtherType" value = "" id = "school" class = "form-control" disabled placeholder = "Please Specify">
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type = "text" name = "" class = "form-control" name = "description" placeholder = "Leave additional information/comment here" id = "floatingTextarea2">
                        </td>
                        <td>
                            <button type = "button" name = "remove" id = "remove" class = "btn btn-danger"><i class = "bi bi-x-lg"></i></button>
                        </td>
                    </tr>                   
                </tbody>
            </table>
            <button class = "btn btn-success" type = "button" name = "add" id = "add">ADD</button>

Вот javascript, который я использовал для добавления или добавления новой строки в таблицу.

<script type = "text/javascript">
    //---------------------------------//
    //script to add new input fields---//
    //---------------------------------//
                $(document).ready(function(){
                    var html = '<tr><td class = "border"><center><span id = "itemNum" style = "font-size: 23px;">0</span></center></td><td><input type = "text" name = "" class = "form-control" name = "requestFor" placeholder = "Teacher\'s name" id = "floatingTextarea1"></td><td><div class = "row"><div class = "col"><select name = "requestType" onclick = "checkRequestType()" id = "requestType" class = "form-control"  required><option value = "Sick leave">Sick leave</option><option value = "Sick leave">Sick leave</option><option value = "Sick leave">Sick leave</option><option value = "Sick leave">Sick leave</option><option >Other</option></select></div><div class = "col"><input type = "text" name = "requestType" id = "OtherType" value = "" id = "school" class = "form-control" disabled placeholder = "Please Specify"></div></div></td><td><input type = "text" name = "" class = "form-control" name = "description" placeholder = "Leave additional information/comment here" id = "floatingTextarea2"></td><td><button type = "button" name = "remove" id = "remove" class = "btn btn-danger"><i class = "bi bi-x-lg"></i></button></td></tr>';
                               


                    var x = 1;
                    var num = 1;
                     $('#add').click(function(){
                        
                        if (true) {

                            $("#main_table").append(html);
                            x++;
                              
                        }
                       
                    });
                      
                      $('#main_table').on('click','#remove',function(){
                        
                        $(this).closest('tr').remove();
                        x--;
                    });


            });
        </script>

Вот javascript, который я использовал, чтобы проверить, содержит ли раскрывающийся список «другое», чтобы включить поле ввода рядом с ним.

<script type = "text/javascript">
  function checkRequestType(){
    if (document.getElementById("requestType").value == "Other"){
      document.getElementById("OtherType").disabled = false;
      console.info("true");
    }else{
      document.getElementById("OtherType").disabled = true;
      console.info("false");
    }
  }
</script>

<script src = "https://code.jquery.com/jquery-3.6.0.js" ></script>