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="select1"  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 l_aSelectobject=document.getElementById("select1");            
     if(document.getElementById("select1").selectedIndex == 0){ 
         for (var i=0; i<l_aSelectobject.length; i++){
             if(document.getElementById("select1")[i].value!="null" && document.getElementById("select2")[i].value!="null"){                                
                 $("#select1").append("<option value=''>null</option>"); 
                 $("#select2").prepend("<option value=''>null</option>");
             }                   
             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) ;
         } 
     }            
        });