populate dropdown after click with new data

I had a script works fine before I make an update with bootstrap 5. I suppose the error comes from that, not sure. When I insert a new categories across a modal pop up and I click on the dropdown, I do not see the new category I do not find why this error appears. Inside the console, nothing in particular happens, everything seems to be correct

Thank you.

the code

$content .= '<div class="col-md-5">';
$content .= '<label for="' . $this->app->getDef('text_products_categories') . '" class="col-5 col-form-label"></label>';
$content .= '<div id="myAjax">';
$content .= HTML::selectMenu('move_to_category_id[]', $category_tree, $current_category_id, 'id="move_to_category_id"');
$content .= '</div>';
$content .= HTML::hiddenField('current_category_id', $current_category_id);
$content .= '<a href="' . $this->app->link('CategoriesPopUp') . '"  data-bs-toggle="modal" data-refresh="true" data-bs-target="#myModal">' . HTML::image($this->getImageDirectory() . 'icons/create.gif', $this->app->getDef('text_create')) . '</a>';
$content .= '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
$content .= '<div class="modal-dialog">';
$content .= '<div class="modal-content">';
$content .= '<div class="modal-body"><div class="te"></div></div>';
$content .= '</div> <!-- /.modal-content -->';
$content .= '</div><!-- /.modal-dialog -->';
$content .= '</div><!-- /.modal -->';
$content .= '</div>';
$content .= '</div>';

the jquery

<script>
  jQuery(document).ready(function() {
    $("#myAjax").on('click', function () {
      var selectedOptionVal = $('#category_id').val();
      $.ajax({
        url: '{$categories_ajax}',
        dataType: 'json',
        success: function (data) {
          //data returned from php
          var options_html = '';
          for (var index in data) {
            var category_id = data[index]['id'];
            var category_name = data[index]['text'];
            var selectedString = category_id == selectedOptionVal ? ' selected="selected"' : '';
            options_html += '<option value="' + category_id + '"' + selectedString + '>' + category_name + '</option>';
          }
          $('#category_id').html(options_html);
        }
      });
    });
  })
</script>