How to organize html listbox items?

Question

I have 2 listbox where I pass the items from one to another, but it always adds at the end of the list, I would like to be able to organize the list to my liking, Itemup style, Itemdown in the second list, see that is not order, but organize in the sequence I want.

The code to

$(document).ready(function() {

  $('#btnA').click(function(e) {
    var selectedOpts = $('#listaA option:selected');
    if (selectedOpts.length == 0) {
      alert("Nenhum item selecionado");
      e.preventDefault();
    }

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

  $('#btnB').click(function(e) {
    var selectedOpts = $('#listaB option:selected');
    if (selectedOpts.length == 0) {
      alert("Nenhum item selecionado");
      e.preventDefault();
    }

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select multiple id="listaA">
        <option value="1">Item1</option>
        <option value="2">Item2</option>
        <option value="3">Item3</option>
        <option value="4">Item4</option>
      </select>
    </td>
    <td>
      <input type="button" id="btnA" value="> > >">
      <br>
      <br>
      <input type="button" id="btnB" value="< < <">
    </td>
    <td>
      <select multiple id="listaB">

      </select>
    </td>
  </tr>
</table>

I searched the web but only found Sort, which sorts list, but that’s not what I want, I want to organize manually.