JSFiddle - React, Tailwind, and code Playground

HTML

<select id="country_list" size="10" multiple style="min-width: 200px;">
   <option value="US">United States</option>
   <option value="UK">United Kingdom</option>
   <option value="IN">India</option>          
  </select>
  <table border="0">
  <tr><td><input type="button" class='add' value=">"/></td></tr>
  <tr><td><input type="button" class='remove' value="<"/></td></tr>
  <tr><td><input type="button" class='add-all' value=">>>"/></td></tr>
  <tr><td><input type="button" class='remove-all' value="<<<"/></td></tr>
  </table>
  <select size="10" name="country_select[]" id="country_select" multiple  style="min-width: 200px;">
  </select>

JavaScript

function reArrangeSelect() {
    $("#country_select").html($("#country_select option").sort(function(a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
    }))
}

$(document).ready(function() {
    $('.add').click(function() {
        $('#country_list option:selected').appendTo('#country_select');
        reArrangeSelect();
    });
    $('.remove').click(function() {
        $('#country_select option:selected').appendTo('#country_list');
    });
    $('.add-all').click(function() {
        $('#country_list option').appendTo('#country_select');
        reArrangeSelect();
    });
    $('.remove-all').click(function() {
        $('#country_select option').appendTo('#country_list');
    });
    $("#register").click(function() {
        $("#country_select option").each(function() {
            $(this).attr("selected", "selected");
        });


    });
});