How to create a form with 2 select tag, adding element from this select to another select, and handle form submission?

I would like to create a form like this, which I can add/remove individual/all element between Available and Seleteted select tag.

When hitting the submit button, form will submit information from Selected to servlet backend process.

So my question are:

1. How to create above form, binding data to Available, handling 4 button to move element?
2. How to send all data from Selected to server when hitting submit button?

assuming you can use jquery

I have two selects multiselect1 and choosenItems

Below I copy selected items from multiselect1

var options = $('select.multiselect1 option:selected').sort().clone();

for (var i = 0; i < options.length; i++) {
    $('select.choosenItems').append(options[i]);
}

So for my addAll function

$('.addAll').on('click', function() {

    var options = $('select.multiselect1 option').sort().clone();

    for (var i = 0; i < options.length; i++) {
        $('select.choosenItems').append(options[i]);
    }
}

For submitting to my servlet I am also using jquery, and again doing

    $(".choosenItems option").each(function() {
        chosenStr = chosenStr + "&chItems=" + $(this).val();
    }); 

    loadUrl = "myServlet?" +  event + '&' + chosenStr;  

and then a normal jquery ajax call

$.ajax({  
    type: "GET",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    async: true,  
    url: loadUrl,  
    success: function(data){ 
            // something                        
    }  
});