Remove row from one table and add it to another table with jQuery

Remove row from one table and add it to another with jQuery

--------------------------------------------------------------------------------------------------------------------------

   CLICK TO CHECK ON LINE


JUST COPY AND PASTE THE CODE ;-)
and click the check box

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PANKAJ PRAJAPATI:-)</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#table1").on('click', 'tr input:checkbox', function () {
                $('#table2').append('<tr  class="success">' + $(this).parent().parent().html() + '</tr>');
                $(this).parent().parent().remove();
            });

            $("#table2").on('click', 'tr input:checkbox', function () {
                $('#table1').append('<tr class="danger">' + $(this).parent().parent().html() + '</tr>');
                $(this).parent().parent().remove();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <table id="table1" class="table">
                        <thead>
                            <tr>
                                <th>select</th>
                                <th>Firstname</th>
                                <th>Lastname</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="success">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>A</td>
                                <td>KUMAR</td>
                                <td>a@email.com</td>
                            </tr>
                            <tr class="success">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>B</td>
                                <td>KUMAR</td>
                                <td>b@</a>email.com</td>
                            </tr>
                            <tr class="success">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>C</td>
                                <td>KUMAR</td>
                                <td>c@email.com</td>
                            </tr>
                            <tr class="success">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>D</td>
                                <td>KUMAR</td>
                                <td>d@gemail.com</td>
                            </tr>
                            <tr class="success">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>E</td>
                                <td>KUMAR</td>
                                <td>e@email.com</td>
                            </tr>
                            <tr class="success">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>F</td>
                                <td>KUMAR</td>
                                <td>f@email.com</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-lg-5">
                    <table id="table2" class="table">
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th>Firstname</th>
                                <th>Lastname</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="danger">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>A1</td>
                                <td>SINGH</td>
                                <td>a1@email.com</td>
                            </tr>
                            <tr class="danger">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>B1</td>
                                <td>SINGH</td>
                                <td>b1@email.com</td>
                            </tr>
                            <tr class="danger">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>C1</td>
                                <td>SINGH</td>
                                <td>c1@email.com</td>
                            </tr>
                            <tr class="danger">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>D1</td>
                                <td>SINGH</td>
                                <td>d1@email.com</td>
                            </tr>
                            <tr class="danger">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>E1</td>
                                <td>SINGH</td>
                                <td>e1@email.com</td>
                            </tr>
                            <tr class="danger">
                                <td>
                                    <input type="checkbox" value="" /></td>
                                <td>F1</td>
                                <td>SINGH</td>
                                <td>f1@email.com</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </form>
</body>
</html>