jquery-multiple-select-boxes-limit-selection

HTML

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
        
        <div id="error_message" class="alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <!-- <a href="#" class="close" data-dismiss="alert">&times;</a> -->
            <strong>Error!</strong> You must select 11 elements!
        </div>

        
<form role="form"> 
        <div class="form-group">
            <div class="col-sm-3">
                <select name="from" id="select1" class="form-control" size="8" multiple="multiple">
                    <option value="elem_1">elem 1</option>
                    <option value="elem_2">elem 2</option>
                    <option value="elem_3">elem 3</option>
                    <option value="elem_4">elem 4</option>
                    <option value="elem_5">elem 5</option>
                    <option value="elem_6">elem 6</option>
                    <option value="elem_7">elem 7</option>
                    <option value="elem_8">elem 8</option>
                    <option value="elem_9">elem 9</option>
                    <option value="elem_10">elem 10</option>
                    <option value="elem_10">elem 11</option>
                    <option value="elem_10">elem 12</option>
                    <option value="elem_10">elem 13</option>
                    <option value="elem_10">elem 15</option>
                    <option value="elem_10">elem 10</option>
                </select>
            </div>
            
            <div class="col-sm-1">
                <button type="button"...

CSS

#error_message {
    display: none;
}

JavaScript

$().ready(function() {
    
    $('#add_starting').click(function() {
        return !$('#select1 option:selected').appendTo('#select2');
    });
    $('#remove_starting').click(function() {
        return !$('#select2 option:selected').appendTo('#select1');
    });
    $('#add_subs').click(function() {
        return !$('#select1 option:selected').appendTo('#select3');
    });
    $('#remove_subs').click(function() {
        return !$('#select3 option:selected').appendTo('#select1');
    });
    
    // clear error on change
    $('form :input').change(function(){
        $("#error_message").hide();
    });
    
    $('button[type="submit"]').on('click', function(e){
        if ( $('#select2').find('option').length != 2 ) {
            e.preventDefault(); // prevent submit
            
            $("#error_message").show();
            console.log("Not posting!");
        } else {
            console.log("Posting!");
            
            $('#select2 option').prop('selected', true);
            $('#select3 option').prop('selected', true);
        }
    });
});