I would like to dynamically display the field values from one of the form fields into a free text field that I will be displaying at the bottom of the page. This would be similar to how you can dynamically populate the emails with {field: value}. The difference here is that there is no submit, so it can't be pulling from the DB. The other option that would work is if there was a way to put in a calculated field in the free text field. Example: This is sample text with a {filed:value} that serves as an example.

How do I go about doing this?

You could try to do the following!
in additional attributes of your first field add

onchange="if (document.getElementById('yourfirstfield').value != ''){
document.getElementById('yoursecondfield').value = this.value;
};"

I have attempted this solution but must be doing it wrong as it doesn't work no matter how I apply it.

Can you either elaborate further.
Is "first field" the dynamic field or the Free text field? in my case "StartDate" is the dynamic field and "Confirmation" is the free text field.
In ('yourfirstfield') do I replace just yourfirstfield or 'yourfirstfield' or ('yourfirstfield') entirely with my field name

eg.

onchange="if (document.getElementById('StartDate').value != ''){
document.getElementById('Confirmation').value = this.value;
};"

or

onchange="if (document.getElementById(StartDate).value != ''){
document.getElementById(Confirmation).value = this.value;
};"

or

onchange="if (document.getElementByIdStartDate.value != ''){
document.getElementByIdConfirmation.value = this.value;
};"

I am not quite sure how to use this solution to get it working.
and if this solution is incorrect could someone else suggest another.

In my case I wish to insert information from three dynamic fields from the first page of the form into a free text field on the final page as a means of confirming details before the user submits.