Assign title value to input field in wordpress posts loop

I want to assign a value to a specific input field in a WordPress loop.
I am showing all the posts in a category in a single page and the category has several posts. Each post has a booking form which when a button is clicked, it pops up.
I am using contact form 7 which is called via do_shortcode() function inside the category template. When for example a form is clicked on ‘post 1’, there should be a hidden field with the value ‘post 1’, if ‘post 2’ is clicked, value of the hidden field should be ‘post 2’ as well.

I have a category which has posts that I’m looping through via the_loop.
Each post has a title and a form. What I want to achieve is within that category, the title of the post is assign to the corresponding input field.

However, the title of the last post is being assigned to the input of the other posts

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <script>
    var title="<?php the_title(); ?>";
        jQuery( ".itinerary-title-class" ).each(function( i ) {
        jQuery(this).attr('value', '<?php the_title(); ?>');
    </script>
    <?php endwhile; ?>

Here is a screenshot of what I want versus what I get. Please assist.