Traversal in a dynamically cloning created table

this was set up to demonstrate the ability to traverse cloned elements.

by seanmcmills

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  
original table:
<table id="original_table" style="border:1px solid red;">
  <tr>
    <td><input type="checkbox" name="checkbox_name" value="not_checked_value"></td>
    <td>name</td>
    <td>price</td>
    <td>everything</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_name" value="checked_value" checked></td>
    <td>name</td>
    <td>price</td>
    <td>everything</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_name" value="another_checked_value" checked></td>
    <td>name</td>
    <td>price</td>
    <td>everything</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_name" value="not_checked_value"></td>
    <td>name</td>
    <td>price</td>
    <td>everything</td>
  </tr>
</table>

<br>
<br>

table using the cloned rows:
<table id="new_table" style="border:1px solid blue;">
</table>

</body>
</html>

CSS

td {
    padding:10px;
}

JavaScript

$(document).ready(function() {

    var orig_table_rows = $('#original_table').children().clone();

    $("#new_table").append(orig_table_rows);

    orig_table_rows.children().find("input:checked").each(function() {
        alert($(this).val());
    })

})