How to pass input value to a multi-step form php

Question

I've got 2 forms. The information and certain fields from form 1 are also found on form 2, saving the user from having to enter the same data twice. The form 2 has a multi-step form, and I can only display the information in step 1, while the other information is in step 3. This is a problem because form 2 has a multi-step form. By the way, the form I'm using is a Contact Form 7 form, and I'll be providing that information to the Booking Form, which will show it using a shortcode. I'm using session here as well.

i use this function to get the data from cf7

custom-function.php

add_action( 'wpcf7_before_send_mail',
  function( $contact_form, &$abort, $submission ) {

    $date_445 = $submission->get_posted_data('date_445');
    $pick_time = $submission->get_posted_data('pick_time');
    $customer_name = $submission->get_posted_data('customer_name');
    $customer_lname = $submission->get_posted_data('customer_lname');
    //other fields below
   

    $_SESSION['cf7_data'] = array(
        'date_445' => $date_445,
        'pick_time' => $pick_time,
        'customer_name' => $customer_name,
        'customer_lname' => $customer_lname,
    );
  },
  10, 3
);

and this is the booking form(shortcode) this is where i will get the value posted by the contact form

booking.php

$date_445 = isset($_SESSION['cf7_data']['date_445']) ? $_SESSION['cf7_data']['date_445'] : '';
  $pick_time = isset($_SESSION['cf7_data']['pick_time']) ? $_SESSION['cf7_data']['pick_time'] : '';
  $customer_name = isset($_SESSION['cf7_data']['customer_name']) ? $_SESSION['cf7_data']         ['customer_name'] : '';
  $customer_lname = isset($_SESSION['cf7_data']['customer_lname']) ? $_SESSION['cf7_data']['customer_lname'] : '';


  <script>
   document.addEventListener("DOMContentLoaded", function() {
   let fields = {
   dateField: document.querySelector('input[name="name_of_date_input"]'),
   timeField: document.querySelector('input[name="name_of_time_input"]'),
   firstNameField: document.querySelector('input[name="name_of_username_input"]'),
   lastNameField:document.querySelector('input[name="name_of_userlastname_input"]'),
   };
    // date and time are in the first step of the booking form                   
   if (!fields.dateField.value) {
      fields.dateField.value = <?php echo esc_js($date_445) ; ?>";
       }
   if (!fields.timeField.value) {
      fields.timeField.value = "<?php echo esc_js($pick_time) ; ?>";
      }
  // names are in the 3rd step of the form
   if (!fields.firstNameField.value) {
      fields.pickField.value = "<?php echo esc_js($pickup_location) ; ?>";
      }
     if (!fields.lastNameField.value) {
      fields.dropField.value = "<?php echo esc_js($drop_location) ; ?>";
     }  });
    </script>

    <?php
    echo do_shortcode('[booking_form_id="10"]');
    ?>

the booking form uses ajax when you input something and click the next button it will get the information and saves in the browser. i am getting the date and time in the first step the only problem is in the 3rd step the data is not populated. Any suggestion will be much appreciated Thank you!