如何动态加载bootstrap双列表框？jquery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-5">
      <h4>可选项</h4>
      <select id="select1" multiple class="form-control"></select>
    </div>
    <div class="col-md-2">
      <br>
      <button id="btn-add" class="btn btn-primary">添加</button>
      <br><br>
      <button id="btn-remove" class="btn btn-primary">移除</button>
    </div>
    <div class="col-md-5">
      <h4>已选项</h4>
      <select id="select2" multiple class="form-control"></select>
    </div>
  </div>
</div>

$(document).ready(function() {
  // 可选项数据
  var options = [
    { value: 1, text: '选项1' },
    { value: 2, text: '选项2' },
    { value: 3, text: '选项3' },
    // 添加更多可选项...
  ];

  // 添加可选项到第一个列表框
  options.forEach(function(option) {
    $('#select1').append($('<option>', {
      value: option.value,
      text: option.text
    }));
  });

  // 添加按钮点击事件
  $('#btn-add').click(function() {
    // 获取选中的可选项
    var selectedOptions = $('#select1 option:selected');
    
    // 将选中的可选项添加到第二个列表框
    selectedOptions.appendTo('#select2');
  });

  // 移除按钮点击事件
  $('#btn-remove').click(function() {
    // 获取选中的已选项
    var selectedOptions = $('#select2 option:selected');
    
    // 将选中的已选项添加到第一个列表框
    selectedOptions.appendTo('#select1');
  });
});