Non visible checkbox with few POST parameters.

index.php

<?php $myposts = get_posts( $args ); ?>

<form id="formName">
  <?php
  foreach ( $myposts as $service ) {
    $service_lenght = get_post_meta($service->ID, 'Lenght');
    ?>
  <label>
    <h1><?php echo $service->post_title ?> </h1>
    <img src="<?php get_the_post_thumbnail_url($service->ID); ?>" />
    <p><?php echo $service->post_content ?> </p>
    <input type="checkbox" name="ShowPost[]"
                           value="<?php echo $service->ID ?>" style="display:none"/>
                    <input id="<?php echo $service->ID ?>"  type="checkbox" name="Lenght[]" style="display:none"
                           value="<?php echo $service_lenght[0] ?>">
    <span></span>
  </label>
  <?php } ?>
  <script>
    //jQuery
    $(document).ready(
        function()
        {
            $("input:checkbox").change(
                function()
                {
                    $('#<?php echo $service->ID ?>').prop('checked', true);
                    if( $(this).is(":checked") )
                    {
                        $("#formName").submit();
                    }
                }
            )
        }
    );
    </script>
  <style>
    input:checked + span:after {
        content: "✓";
        border-bottom: solid gray;
    }
  </style>
</form>

Recently, I had to create a booking system (for something like spa), with the option of choosing a service from WordPress.
I'm getting a custom ID of custom post and I send his ID along with connected custom fields, using jQuery.

The customer clicks on the description of the service, does not see any checkboxes but gets a visual signal, marked with "✓"