Updating using java script and jQuery

Question

Is it possible using javascript and jQuery to update the two forms of this page, in tandem as the fields change? http://www.milesmemorials.com/product-GH54.html  As you can see there are two forms, the first holds all the element choices and has an 'add to basket' button, the other after clicking 'proceed to proof' shows and gathers name, tel, email and all other fields from first form (which will be 'hidden' once this problem is resolved) all that will show will be name, tel and email. Currently what happens is choices are made, the proof button is clicked but if a selection is then changed the duplicate elements in form2 are not updated unless the proof button is clicked back and then clicked again. This can result in incorrect information being submitted. So going back to my original question, Is it possible using javascript and jQuery to update the two forms in tandem as the fields change?
Any help really appreciated!!

Answer 1

Thank you for your post. I think thats just what im looking for. So this is one of my form elements -
<select name="colour" class="productButton"id="colour">
        <option selected value="0">-- Select colour --</option>
        <option value="2442">Galaxy black granite (&pound;2442)</option>
        <option value="2134">Black granite (&pound;2134)</option>
      </select>
and i need to make this form field update when the element above is changed -
<input name="colour2" id="colour2" type="text" />
What do i need to change on this javascript to make this function work?
<script> $( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    $( "div" ).text( str );
  .change();
</script>