How to move items between two listboxes?

Question

    <div class="data_wrap list-padding">
    <div class="approveTermsContainer">
        <div class="newItems"> <b>send</b>
            <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!"><i class="fa fa-info-
circle"></i></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>receive</b>
            <br />
            <select multiple="multiple" id='lstBox2'> </select>
        </div>
    </div>
</div>

In the above code, i have the two listboxes. i.e, listbox1, listbox2. Where On selecting the listboxes1 item(heading test), and selecting the btn. it has to move to the listbox2.

$(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();
  });
});

Above is the jquery code, which I have tried. Am i attaching my codepen code here.

https://codepen.io/dhanunjayt/pen/GRxMpBX

Answer 1

Your JS code is right, and also works.

You should change your HTML in select element.

Here is some code works demo.

<select multiple id='lstBox1'>
   <option value="1">foo</option>
   <option value="2">bar</option>
</select>