Add hidden field with CMS item name to Form Submission (all the collection items are on the same page)

I have a CMS list of job positions on Career page of the site. Each job has an Apply button that opens a form pop-up. I want to know what position a person applies to.
I know that for a Collection Page a hidden field embed like this <input type="hidden" name="job" value="{dynamic field name}"/> would work, but if all the collection items are on the same page this method doesn’t seem to work. Is there any other way maybe?

You could use JS custom code to listen for a click on the button, then get the value of the collection item title in your collection list and then write that value to the hidden field in the form.

thank you for you suggestion! still can’t figure out the solution but maybe you could see where the problem could be

added hidden field to the form with “hidden-field” ID name

added jquery to the head of the page <script src=""></script>
then added the following script to the body of the page

  $(document).ready(function() {
    // Function to set the value of the hidden field
    function updateHiddenField(jobTitle) {

    // Attach click event to the Apply button
    $('.button-apply').click(function() {
      // Get the job title from the collection list item
      var jobTitle = $(this).closest('.job_posts-item').find('.job-title').text().trim();

      // Update the hidden field with the job title

then tested the form and but hidden field doesn’t appear in a test form submission

also here’s read-olny to the project