動的に追加した要素の削除について

ラジオをボタンで選択した行を別の表に追加し、追加した行をチェックボックスで選択し指定すると、指定した行のみ削除を行えるjspファイルを作成したいです。

以下のサンプルコードをHTMLファイルで実行した際は、目的の通りに、動くのですが、jspファイルに変更して、実行すると指定した行のみでなく、追加した全ての行が削除されてしまいます。

<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
    $('#add').on("click", function() {
        var tr = '<tr><td><input type="checkbox" name="checkbox" value="' + "val" + '"></td><td>' + "val" + '</td><td>' + "resuto21" + '</td><td>' + "tesuto3" + '</td><td>' + "tesuto4" + '</td><td>' + "tesuto5" + '</td><td>' + "val" + '</td></tr>';
        $('#sample_table').append(tr);
    });

    $('#del').on("click", function() {
        $('#sample_table input[type=checkbox]:checked').each(function() {
            $(this).closest('tr').remove();
        });
    });
});
</script>
</head>
<body>

<table id="sample_table" class="demo">
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr>
</table>

<button type="button" id="add" name="sampleadd" class="btn  margin-bottom" style="color: #ffffff; background-color: #40b740;">追加</button>
<button type="button" id="del" name="sampledel" class="btn  margin-bottom" style="color: #ffffff; background-color: #40b740;">削除</button>

</body>
</html>

jspファイルをChromeで実行した際のソースは以下の通りです。

<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
    $('#add').on("click", function() {
        var tr = '<tr><td><input type="checkbox" name="checkbox" value="' + "val" + '"></td><td>' + "val" + '</td><td>' + "resuto21" + '</td><td>' + "tesuto3" + '</td><td>' + "tesuto4" + '</td><td>' + "tesuto5" + '</td><td>' + "val" + '</td></tr>';
        $('#sample_table').append(tr);
    });

    $('#del').on("click", function() {
        $('#sample_table input[type=checkbox]:checked').each(function() {
            $(this).closest('tr').remove();
        });
    });
});
</script>
</head>
<body>

<table id="sample_table" class="demo">
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr>
</table>

<button type="button" id="add" name="sampleadd" class="btn  margin-bottom" style="color: #ffffff; background-color: #40b740;">追加</button>
<button type="button" id="del" name="sampledel" class="btn  margin-bottom" style="color: #ffffff; background-color: #40b740;">削除</button>

</body>
</html>

何が原因で、動作が異なるのか理解できず、修正が行えません。
どなたか、分かる方、問題点/修正方法を教えてください。
よろしくお願い致します。