Capturing Iframe Value and Submitting Value Via CF7 After Every Part Change In Iframe

Question

I've been working on creating an archive that consists of posts with associated iframes that when clicked, will display in a modal. The problem I'm struggling with is capturing data from the iframe, specifically the Reference Number, which has an object name of "standardName".

Page is found here: https://staging-casterconcepts.kinsta.cloud/caster-configurator

This is what the process looks like:

1. The user can narrow down the list of results by using the filters on the page once logged in or registered(irrelevant to the issue.)
2. The user would click on "customize" for one of the posts shown on the archive page.Screenshot of results containing modals
3. A modal would open containing the iframe. Screenshot of Iframe
4. In the background, there is a hidden CF7 form that captures the user's account information, as well as a CF7 field(ID: "cad-dwnld-part") that should be populated by the "standardName" from the iframe.
5. The form should only be submitted after the user clicks on "Generate CAD" in the iframe. This is where I'm using the provided 3rd party PCOM messages in attempt to capture the exact "standardName" for every download. See definitions of the PCOM messages below.

PCOM_PART_CHANGED - An editable part or table row has been changed

PCOM_PART_GENERATED - A part finished generating

Some things to note:

1. A user is able to modify the iframe model by using the selection fields within each iframe. Every time a model is edited, it will create a new "standardName", so for every part change followed by a download, a new "standardName" should be captured and submitted through the hidden CF7 form (ID: cadDownloadForm).

The problem: At the moment, I'm only able to capture a "standardName" when the model is edited and not on initial load, in the model's default state. Also, CF7 data only populates for the first result shown in the archive. The results after the 1st entry are not passing data to the CF7 form.

This is what my code looks like:

  <!-- Modal body -->
  <div class="modal-body">
    <div class="text-center <?php if ( is_user_logged_in() ){ echo 'd-none'; } ?>" style="padding-bottom: 15px;">
      <span style="color: red; font-weight: bold;"><?php esc_html_e( 'NOTICE:' ); ?></span> <?php esc_html_e( 'You must be logged in to download a CAD Model.' ); ?>
        <br>
      <?php esc_html_e( 'You can create an account or login using the links below. Once you\'re logged in we\'ll bring you back here.' ); ?>
        <br><br>
      <a href="/login-access/?action=register" class="crt-acct-btn"><?php esc_html_e( 'Create Account' ); ?></a>
        &nbsp;&nbsp;&nbsp;
      <?php $current_url = home_url( add_query_arg( [], $GLOBALS['wp']->request ) ); ?>
      <a href="<?php echo esc_url( wp_login_url( $current_url )  ); ?>" class="crt-acct-btn"><?php esc_html_e( 'Login' ); ?></a>
    </div>

    <div>
    <?php
      $user = get_current_user_id();
      $user_country = get_field('country', 'user_'. $user);

      if ( $user_country == 'United States' ) {
        $field = get_field_object('us_state', 'user_'. $user);
        $value = $field['value'];
        $label = $field['choices'][ $value ];
        //echo $label;
      } elseif ( $user_country == 'Canada' ) {
        $field = get_field_object('ca_province', 'user_'. $user);
        $value = $field['value'];
        $label = $field['choices'][ $value ];
        //echo $label;
      } else {
        $field = get_field_object('mx_province', 'user_'. $user);
        $value = $field['value'];
        $label = $field['choices'][ $value ];
        //echo $label;
      }
    ?>
    <?php echo do_shortcode( '[contact-form-7 id="cadDownloadForm" title="CAD Download" html_id="cadDownloadForm"]' ); ?>
    </div>

    <script>
      //function getDetails() {
      document.getElementById("cad-dwnld-part").value = "<?php //echo $product->get_sku(); ?>";
      document.getElementById("cad-dwnld-email").value = "<?php $current_user = wp_get_current_user(); echo $current_user->user_email; ?>";
      document.getElementById("cad-dwnld-pn").value = "<?php the_field('phone_number', 'user_'. $user); ?>";
      document.getElementById("cad-dwnld-fn").value = "<?php the_field('first_name', 'user_'. $user); ?>";
      document.getElementById("cad-dwnld-ln").value = "<?php the_field('last_name', 'user_'. $user); ?>";
      document.getElementById("cad-dwnld-cn").value = "<?php the_field('company_name', 'user_'. $user); ?>"
      document.getElementById("cad-dwnld-jt").value = "<?php the_field('job_title', 'user_'. $user); ?>";
      document.getElementById("cad-dwnld-in").value = "<?php the_field('industry', 'user_'. $user); ?>";
      document.getElementById("cad-dwnld-co").value = "<?php the_field('country', 'user_'. $user); ?>";
      document.getElementById("cad-dwnld-st").value = "<?php echo $value; ?>";
      //}
    </script>

      <?php
      if ( current_user_can('author') || current_user_can('administrator') && is_user_logged_in() ) {?>
          <iframe id="pcomiframe"  loading="lazy" src="<?php the_field('prj_link_sales',get_the_ID()); ?>" width="100%" height="100%"></iframe>
    <?php } elseif ( is_user_logged_in() ) {?>
          <iframe id="pcomiframe"  loading="lazy" src="<?php the_field('prj_link',get_the_ID()); ?>" width="100%" height="100%"></iframe>
    <?php  }
      ?>

  </div>

  <!-- Modal footer -->
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>

    <script>
    // message callback
    var xyz = 0;
    $(window).on('message', function(e) {

        var event = e.originalEvent;

        if (event.data == "PCOM_PART_CHANGED") {
            console.log(event.data);
            document.getElementById('pcomiframe').contentWindow.postMessage('PCOM_INFO', '*');
            $('#cad-dwnld-part').val(event.data.standardName);
            //alert("Part Updated");
        }

        if (event.data == "PCOM_PART_CHANGED" && document.getElementById("cad-dwnld-email").value === '') {
          document.getElementById("cad-dwnld-email").value = "<?php $current_user = wp_get_current_user(); echo $current_user->user_email; ?>";
          document.getElementById("cad-dwnld-pn").value = "<?php the_field('phone_number', 'user_'. $user); ?>";
          document.getElementById("cad-dwnld-fn").value = "<?php the_field('first_name', 'user_'. $user); ?>";
          document.getElementById("cad-dwnld-ln").value = "<?php the_field('last_name', 'user_'. $user); ?>";
          document.getElementById("cad-dwnld-cn").value = "<?php the_field('company_name', 'user_'. $user); ?>";
          document.getElementById("cad-dwnld-jt").value = "<?php the_field('job_title', 'user_'. $user); ?>";
          document.getElementById("cad-dwnld-in").value = "<?php the_field('industry', 'user_'. $user); ?>";
          document.getElementById("cad-dwnld-co").value = "<?php the_field('country', 'user_'. $user); ?>";
          document.getElementById("cad-dwnld-st").value = "<?php echo $value; ?>";
        }
        console.log(xyz);
        if (event.data == "PCOM_PART_GENERATED") {
            if(xyz == 0){
                console.log('inside the condtion...');
                console.log(xyz);
                var cf7form = wpcf7.submit(document.getElementById('cadDownloadForm'));
                
                console.log(cf7form);
                document.getElementById('cadDownloadForm').submit();
                xyz = 2;
            }
        }

        if(event.data.indexItemId){
                   $('#cad-dwnld-part').val(event.data.standardName);
        }

    });
    // #end Message Callback

    function callIframe() {
        document.getElementById('pcomiframe').contentWindow.postMessage('PCOM_INFO', '*');
    }

</script>

  </div>

</div>