如何在列表框中选择一个值并将其带有optgroup标签的值克隆到另一个列表框中

Question

我目前正在处理一个具有两个列表框的代码，每个列表框都具有与每个项目相关的选项组。我需要的是，当我单击listbox1中的值时，该值及其optgroup将在listbox2中克隆。问题是我不知道如何选择当前的optgroup。单击值时，如何检查listbox2中是否存在当前optgroup，如果退出则仅添加值，如果不添加值及其外组。以相同的方式，如果单击该值时listbox1中仅剩余一个值，则将从listbox1中删除此值及其optgroup。

我在这个论坛上找到了这段代码，我试图对其进行调整以适应我的需要，但是我一直在努力，没有任何运气。

感谢您为解决此问题提供的帮助。

这是我正在使用的代码：

$(document).ready(function() {
   
	$("#lstBox1").click(function () {
		 var selectedOp1 = $('#lstBox1 option:selected');
		 if($('#lstBox2 optgroup[label=Cars]').html() == null){
		   $('#lstBox2').append('<optgroup label="Cars"></optgroup>');
           $('#lstBox2 optgroup[label=Cars]').append($(selectedOp1).clone());
        } else {
           $('#lstBox2 optgroup[label=Cars]').append($(selectedOp1).clone());
        }
		 
        $(selectedOp1).remove();
    });

    $("#lstBox2").click(function () {
		 var selectedOp2 = $('#lstBox2 option:selected');
		 $('#lstBox1').append($(selectedOp2).clone());
        $(selectedOp2).remove();
    });	
	
	
});

#lstBox1 {
	width: 200px;
	height: 300px;
	
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 8px;
  padding: 5px;
  overflow-y: auto;

}
#lstBox2 {
  width: 200px;
  height: 300px;
  border-radius: 8px;
  border-color: #58A0DC;
  padding: 5px;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select multiple="multiple" id='lstBox1'>

    <optgroup label="Cars">             
    <option value="40">Toyota</option>
    <option value="44">Ford</option>
    <option value="43">Kia</option>
    <option value="42">BMW</option>

    <optgroup label="Mortorcycle">
    <option value="16">Kawasaki</option>
    <option value="31">Suzuki</option>
    <option value="17">Yamaha</option>
    </select>



    <select multiple="multiple" id='lstBox2'>

    </select>

$(document).ready(function() {

$("#lstBox1").click(function () {
     var selectedOp1 = $('#lstBox1 option:selected');

     if($('#lstBox2 optgroup[label=Cars]').html() == null){
       $('#lstBox2').append('<optgroup label="Cars"></optgroup>');
       $('#lstBox2 optgroup[label=Cars]').append($(selectedOp1).clone());
    } else {
       $('#lstBox2 optgroup[label=Cars]').append($(selectedOp1).clone());
    }

    $(selectedOp1).remove();
});

$("#lstBox2").click(function () {
     var selectedOp2 = $('#lstBox2 option:selected');
     $('#lstBox1').append($(selectedOp2).clone());
    $(selectedOp2).remove();
}); 


});