JSFiddle - React, Tailwind, and code Playground

by sozonov

HTML

<select id="distriList" name="distriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;">
			<option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
</select>
<a href="javascript:void(0);" id="addPop">Add</a>
<a href="javascript:void(0);" id="removePop">Remove</a>
<select id="selectDistriList" name="selectDistriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;">
			<option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="H">H</option>
</select>

JavaScript

$('#addPop').click(function () {
          if ($('#distriList option:selected').val() != null) {
              var tempSelect = $('#distriList option:selected').val();
              $('#distriList option:selected').remove().appendTo('#selectDistriList');
              $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
              $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
              $("#selectDistriList").val(tempSelect);
              tempSelect = '';
          } else {
              alert("Before add please select any position.");
          }
      });

      $('#removePop').click(function () {
          if ($('#selectDistriList option:selected').val() != null) {
              var tempSelect = $('#selectDistriList option:selected').val();
              $('#selectDistriList option:selected').remove().appendTo('#distriList');
              $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
              $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
            
              $("#distriList").val(tempSelect);
              tempSelect = '';
          } else {
              alert("Before remove please select any position.");
          }
      });