How to move items between two select lists?

How to move items between two select lists?

i.e, On selecting ""heading test""  and click button, I want to move the item(""heading test"") to listbox2. (the complete ul,li tag)

Working code pen link:- https://codepen.io/dhanunjayt/pen/GRxMpBX

At present issue is, i am unable to move item from one to another, 

<div class="data_wrap list-padding">
	<div class="approveTermsContainer">
		<div class="newItems"> AVAILABLE
			<br />
			<select multiple="multiple" id='lstBox1'>
        			<ul class="tree" multiple="multiple" id='lstBox1'>
				<li>
					<div class="btn-group" data-toggle="buttons"> </div> <a href="">heading test</a>
					<ul>
						<li>
							<div class="btn-group" data-toggle="buttons"> </div> test <span rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="right" data-html="true" data-title="This is my tooltip!">class="fa fa-info-
circle"></span> </li>
					</ul>
				</li>
			</ul>
      </select>
		</div>
		<div class="transferBtns">
			<input type='button' id='btnRight' value='  >  ' />
			<br />
			<input type='button' id='btnLeft' value='  <  ' /> </div>
		<div class="approvedItems"> ^__b>INCLUDED
			<br />
			<select multiple="multiple" id='lstBox2'> </select>
		</div>
	</div>
</div>

$(document).ready(function () {
     $('#btnRight').click(function (e) {
       var selectedOpts = $('#lstBox1 option:selected');
       if (selectedOpts.length == 0) {
         alert("Nothing to move.");
         e.preventDefault();
       }

       $('#lstBox2').append($(selectedOpts).clone());
       $(selectedOpts).remove();
       e.preventDefault();
     });

     $('#btnLeft').click(function (e) {
       var selectedOpts = $('#lstBox2 option:selected');
       if (selectedOpts.length == 0) {
         alert("Nothing to move.");
         e.preventDefault();
       }

       $('#lstBox1').append($(selectedOpts).clone());
       $(selectedOpts).remove();
       e.preventDefault();
     });
   });