list items click not working in java script

I have a jsp page as shown below. My requirement is when i click on one list item and click left or right arrow button the list item should move to the next list. The buttton click function is written in jquery. But the button click is not working what may be the solution for this problem

This is my jsp page:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <form method="post">
            <table style='width:370px;'>
                <tr>
                    <td style='width:160px;'>
                        <b>Group 1:</b><br/>
                        <select multiple="multiple" id='lstBox1'>
                            <option value="ajax">Ajax</option>
                            <option value="jquery">jQuery</option>
                            <option value="javascript">JavaScript</option>
                            <option value="mootool">MooTools</option>
                            <option value="prototype">Prototype</option>
                            <option value="dojo">Dojo</option>
                        </select>
                    </td>
                    <td style='width:50px;text-align:center;vertical-align:middle;'>
                        <input type='button' id='btnRight' value ='  >  '/>
                        <br/><input type='button' id='btnLeft' value ='  <  '/>
                    </td>
                    <td style='width:160px;'>
                        <b>Group 2: </b><br/>
                        <select multiple="multiple" id='lstBox2'>
                            <option value="asp">ASP.NET</option>
                            <option value="c#">C#</option>
                            <option value="vb">VB.NET</option>
                            <option value="java">Java</option>
                            <option value="php">PHP</option>
                            <option value="python">Python</option>  
                        </select>
                    </td>
                </tr>
            </table>
        </form>

        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/plugins/pace.min.js"></script>
        <script src="js/main.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {
                $('#btnRight').click(function(e) {
                    alert("Nothing to move.");
                    var selectedOpts = $('#lstBox1 option:selected');
                    if (selectedOpts.length === 0) {
                        alert("Nothing to move.");
                        e.preventDefault();
                    }

                    $('#lstBox2').append($(selectedOpts).clone());
                    $(selectedOpts).remove();
                    e.preventDefault();
                });

                $('#btnLeft').click(function(e) {
                    var selectedOpts = $('#lstBox2 option:selected');
                    if (selectedOpts.length === 0) {
                        alert("Nothing to move.");
                        e.preventDefault();
                    }

                    $('#lstBox1').append($(selectedOpts).clone());
                    $(selectedOpts).remove();
                    e.preventDefault();
                });
            });
            ​


        </script>
    </body>
</html>