Cloning modified element with jQuery

Question

In a reference HTML table, the tag <tfoot> is accessed and has its data modified [not included here because it is working], and when using the method .clone() jQuery to create a deep copy for the clone table, the contents of <tfoot> is cloned correctly but the value that has been modified in the reference table is not sent to the clone table, which is cloned are the static initial data by default, such as cloning what is also modified in the DOM from the reference table to the clone table, which is missing?

jQuery helped me build the function below and it works, but as I mentioned, it does not create deep copy with the DOM modified.

<table class="ref">
  <thead></thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="check">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Conteúdo default</th>
    <tr>
  </tfoot>
</table>

<table class="clone">
  <thead></thead>
  <tbody></tbody>
  <tfoot>
  </tfoot>
</table>

<script>
$('table.ref input[type="checkbox"]').change(function () {
    let $cloningFoot = $('table.ref tfoot tr').clone();
    $('table.clone tfoot').html($cloningFoot);
});
</script>

Answer 1

By the code you posted, as can be seen in the example below, cloning works. What was missing there is that after you make the clone you should take its content with the method html(). Notice that I change the contents of footer table ref and this new content is cloned for footer in table clone normally:

$('table.ref input[type="checkbox"]').on('change', function() {
  $('table.ref tfoot tr th').text('Outro Conteúdo !!!');  //novo conteúdo
  let $cloningFoot = $('table.ref tfoot').clone();
  $('table.clone tfoot').html($cloningFoot.html()); //pega o conteúdo e insere
});

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

<table class="ref">
  <thead></thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="check">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Conteúdo default</th>
    </tr>
  </tfoot>
</table>

<table class="clone">
  <thead></thead>
  <tbody></tbody>
  <tfoot>
  </tfoot>
</table>

In this example is shown on the console that cloning works:

$('table.ref input[type="checkbox"]').on('change', function() {
  $('table.ref tfoot tr th').text('Outro Conteúdo !!!');
  let $cloningFoot = $('table.ref tfoot').clone();
  $('table.clone tfoot').html($cloningFoot.html());

  console.log('Tabela ref: ', $('table.ref').html());
  console.log('Tabela clone: ', $('table.clone').html());
});

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

<table class="ref">
  <thead></thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="check">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Conteúdo default</th>
    </tr>
  </tfoot>
</table>

<table class="clone">
  <thead></thead>
  <tbody></tbody>
  <tfoot>
  </tfoot>
</table>