javascript - Unable to append and update option from select selected jquery -

i'm trying append 1 option selected select. issue i'm having i'm able append 1 of option desire if pick different option within same select, option gets appended not want. want update appended options if different 1 selected. far have. select dynamic ("next_exp") id of each select created.

 $('#myselect'+next_exp).on( 'change', function() {     var sel = $('[id^="select-reflecting-option-selected"]'), opt = $( '<option/>' );    if (sel.find('option').text().indexof(this.id) > 0) {         $('option[value=' + this.id + ']').remove();           $("select[select-reflecting-option-selected] option:selected").remove();     } else {        sel.append( $("<option />").text(this.value).val( this.value));     }  }); 

i think made simple looking complex.

all have find .selectedindex , use "move" option the other select using .eq() , .append().

you don't have remove , create new... when append exiting element somewhere else, "move"... not .clone().

$('#myselect').on( 'change', function() {    var selectedindex = $(this)[0].selectedindex    if( selectedindex > 0){      $("#myotherselect").append( $(this).find("option").eq(selectedindex) );    }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <select id="myselect">    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option>    <option>5</option>  </select>    <select id="myotherselect">    <option>a</option>    <option>b</option>    <option>c</option>    <option>d</option>    <option>e</option>  </select>

---

edit

i didn't aspect of checking if option in second select...

this need additional verification, obviously.
comments in code.

$('#myselect').on( 'change', function() {      // selected index 1st select element.    var selectedindex = $(this)[0].selectedindex;    // text of selected option (will used compare).    var selectedtext = $(this).find("option").eq(selectedindex).text();      // collection of option elements other select.    var otherselectoptions = $("#myotherselect").find("option");      // empty array store text of options in other select.    var otherselectoptiontexts = [];      // loop fill array above.    for(i=0;i<otherselectoptions.length;i++){      otherselectoptiontexts.push(otherselectoptions.eq(i).text());    }      // console logs know happens here...    console.log(json.stringify(otherselectoptiontexts));    console.log(selectedtext);      // if selected option not first.    if( selectedindex > 0){        // if selected option's text isn't found in array filled previously.      if(otherselectoptiontexts.indexof(selectedtext) == -1){        console.log("option moved other select.");          // move option in other select        $("#myotherselect").append( $(this).find("option").eq(selectedindex) );          // if text found.      }else{        console.log("option in other select... removed.");          // remove option        $(this).find("option").eq(selectedindex).remove();      }    }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <select id="myselect">    <option>--select number</option>    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option>    <option>5</option>  </select>    <select id="myotherselect">    <option>--select letter/number</option>    <option>a</option>    <option>b</option>    <option>3</option>    <option>c</option>    <option>d</option>    <option>e</option>  </select>

the number 3 first select not "moved"... removed, because there option 3 in second select.