如何在多选bootstrap dropdown jquery中选择2个下拉列表的基础上，在列表中添加/删除元素？

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉列表1
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown1">
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉列表2
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown2">
    <a class="dropdown-item" href="#">选项A</a>
    <a class="dropdown-item" href="#">选项B</a>
    <a class="dropdown-item" href="#">选项C</a>
  </div>
</div>

var selectedOptions = [];

$('.dropdown-item').on('click', function() {
  var optionText = $(this).text();
  
  if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    selectedOptions = selectedOptions.filter(function(option) {
      return option !== optionText;
    });
  } else {
    $(this).addClass('selected');
    selectedOptions.push(optionText);
  }
});

<button id="addButton" class="btn btn-primary">添加选中的元素</button>
<button id="removeButton" class="btn btn-danger">删除选中的元素</button>

$('#addButton').on('click', function() {
  // 将选中的元素添加到另一个下拉列表中
  var selectedItems = $('.dropdown-item.selected').clone();
  $('#dropdown2 .dropdown-menu').append(selectedItems);
});

$('#removeButton').on('click', function() {
  // 从第二个下拉列表中删除选中的元素
  $('.dropdown-item.selected').remove();
});