adding multiple checkboxes to a form element

Let's suppose: a page with some dynamically generated checkboxes outside of a form element.

After the user has checked some of the checkboxes, I would love to append all those checkboxes (either checked or unchecked) into the form element so that when the user click the "submit" button, the form takes into account the checkboxes, their ids, names, data-names and their status (checked or unchecked). Is that possible ?

I have tried a codpen here: https://codepen.io/anthonysalamin/pen/ZxvZpP?editors=1010 but was unsuccessful sofar.

The jQuery code:

//insert all checkbox input elements into the form id="reservation"
  $("#reservation").submit(function(evt) {
  // should append all checkboxes to the form
  $("<input type='checkbox' />").append("#reservation");
});

Screenshot of my codpen here