JSFiddle - React, Tailwind, and code Playground

HTML

<select name="select1" id="select1" multiple size="10">
    <option>1</option>
    <option>null</option>
    <option>null</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="select2" id="select2" multiple size="10">
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>null</option>
    <option>10</option>
</select>
<input type="button" class="small button" id="id" value="OK">

JavaScript

$("#id").click(function () {
     var sel1 = document.getElementById("select1");
     var sel2 = document.getElementById("select2");
     if (sel1.selectedIndex == 0) {
         var optionS1 = Array.prototype.slice.call(sel1.options);
         var optionS2 = Array.prototype.slice.call(sel2.options);
         for (var i = 0; i < optionS1.length; i++) {
             if (optionS1[i].text != "null" && optionS2[i].text != "null") {
                 $(sel1).append("<option value=''>null</option>");
                 $(sel2).prepend("<option value=''>null</option>");
                 return;
             } else {
                 var $op = $('#select1 option:selected'),
                     $this = $(this);
                     if($op.length){                
                      $op.first().prev().before($op) ;
                 } 
             }
         }
     } else {
         var $op = $('#select1 option:selected'),
             $this = $(this);
         if ($op.length) {
             $op.first().prev().before($op);
         }
     }
 });