Show user inputs on a summary page
<p>I have several quantity boxes next to products so a user can input what quantity they want of a certain product.</p>

<p>The setup uses a step by step process using Jquery with the first step made up of checkboxes, the second made up of quantity inputs (where I need the help!) and the final step shows what has been selected... on submit it all gets emailed to me.</p>

<p>Step 1 with checkboxes is complete (with a lot of help from @Beetroot-Beetroot -<a href="http://stackoverflow.com/questions/14727451/step-by-step-checkbox-process-with-summary-of-selections">Step by step checkbox process with summary of selections</a>). Step 2 is where I need the help, how can I show the user quantity inputs on the summary page?</p>

<p>Here's the HTML:</p>

<pre><code>&lt;form id="customisesystem" method="post" action=""&gt;
  &lt;div id="first-step"&gt;
    &lt;div class="steps"&gt;
      &lt;p&gt;&lt;b&gt;Step 1 of 3&lt;/b&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="progress-buttons"&gt;&lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;div id="customise-area"&gt;
      &lt;div id="customise-title"&gt;
        &lt;p&gt;&lt;b&gt;1. Hardware &amp;amp; software options&lt;/b&gt; &lt;span&gt;Please choose one or more of the following&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="customise-area"&gt;
        &lt;?php $posts = get_field('options');
                                if( $posts ):
                                $items = 0;
                                foreach( $posts as $post): // variable must be called $post (IMPORTANT)
                                    setup_postdata($post); ?&gt;
        &lt;div class="custom-option"&gt;
          &lt;p&gt;&lt;b&gt;
            &lt;?php the_title(); ?&gt;
            &lt;/b&gt;&lt;/p&gt;
          &lt;br /&gt;
          &lt;div&gt; &lt;?php echo the_content(); ?&gt; &lt;/div&gt;
          &lt;?php $counter = 1; while(the_repeater_field('images')): ?&gt;
          &lt;?php if($counter &lt;= 1) { ?&gt;
          &lt;img width="180" height="136" src="&lt;?php the_sub_field('image'); ?&gt;" alt="&lt;?php the_title(); ?&gt;" /&gt;
          &lt;?php } ?&gt;
          &lt;?php $counter++; endwhile; ?&gt;
          &lt;p&gt;
            &lt;input type="checkbox" name="hardware[]" value="&lt;?php the_title(); ?&gt;"&gt;
            Select&lt;/p&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;?php $items++; endforeach;
                                wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
                                endif; ?&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- end first-step --&gt;

  &lt;div id="second-step"&gt;
    &lt;div class="steps"&gt;
      &lt;p&gt;&lt;b&gt;Step 2 of 3&lt;/b&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="progress-buttons"&gt;&lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;div id="customise-area"&gt;
      &lt;div id="customise-title"&gt;
        &lt;p&gt;&lt;b&gt;2. Accessories&lt;/b&gt; &lt;span&gt;Please choose one or more of the following&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="customise-area"&gt;
        &lt;?php $posts = get_field('accessories');
                                if( $posts ):
                                $items = 0;
                                foreach( $posts as $post): // variable must be called $post (IMPORTANT)
                                    setup_postdata($post); ?&gt;
        &lt;?php if ($items&amp;1) { ?&gt;
        &lt;div class="custom-option"&gt;
          &lt;p&gt;&lt;b&gt;
            &lt;?php the_title(); ?&gt;
            &lt;/b&gt;&lt;/p&gt;
          &lt;br /&gt;
          &lt;div&gt; &lt;?php echo the_content(); ?&gt; &lt;/div&gt;
          &lt;?php $counter = 1; while(the_repeater_field('images')): ?&gt;
          &lt;?php if($counter &lt;= 1) { ?&gt;
          &lt;img width="180" height="136" src="&lt;?php the_sub_field('image'); ?&gt;" alt="&lt;?php the_title(); ?&gt;" /&gt;
          &lt;?php } ?&gt;
          &lt;?php $counter++; endwhile; ?&gt;
          &lt;p style="clear:right;float:right;width:180px;"&gt;
            &lt;?php if(get_field('sizes')) { ?&gt;
            &lt;?php while(the_repeater_field('sizes')) { ?&gt;
            &lt;input type="text" name="quantity[]" style="width:15px;" value="0"&gt;
            &lt;?php echo the_sub_field('size'); ?&gt;&lt;br /&gt;
            &lt;input type="hidden" name="product[]" value="&lt;?php echo the_title(); ?&gt; - &lt;?php echo the_sub_field('size'); ?&gt;"&gt;
            &lt;?php } ?&gt;
            &lt;?php } else { ?&gt;
            &lt;input type="text" name="quantity[]" style="width:15px;" value=""&gt;
            &lt;?php echo the_sub_field('size'); ?&gt;&lt;br /&gt;
            &lt;input type="hidden" name="product[]" value="&lt;?php echo the_title(); ?&gt;"&gt;
            &lt;?php } ?&gt;
          &lt;/p&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;?php } else { ?&gt;
        &lt;div class="custom-option"&gt;
          &lt;p&gt;&lt;b&gt;
            &lt;?php the_title(); ?&gt;
            &lt;/b&gt;&lt;/p&gt;
          &lt;br /&gt;
          &lt;div&gt; &lt;?php echo the_content(); ?&gt; &lt;/div&gt;
          &lt;?php $counter = 1; while(the_repeater_field('images')): ?&gt;
          &lt;?php if($counter &lt;= 1) { ?&gt;
          &lt;img width="180" height="136" src="&lt;?php the_sub_field('image'); ?&gt;" alt="&lt;?php the_title(); ?&gt;" /&gt;
          &lt;?php } ?&gt;
          &lt;?php $counter++; endwhile; ?&gt;
          &lt;p style="clear:right;float:right;width:180px;"&gt;
            &lt;?php if(get_field('sizes')) { ?&gt;
            &lt;?php while(the_repeater_field('sizes')) { ?&gt;
            &lt;input type="text" name="quantity[]" style="width:15px;" value="0"&gt;
            &lt;?php echo the_sub_field('size'); ?&gt;&lt;br /&gt;
            &lt;input type="hidden" name="product[]" value="&lt;?php echo the_title(); ?&gt; - &lt;?php echo the_sub_field('size'); ?&gt;"&gt;
            &lt;?php } ?&gt;
            &lt;?php } else { ?&gt;
            &lt;input type="text" name="quantity[]" style="width:15px;" value=""&gt;
            &lt;?php echo the_sub_field('size'); ?&gt;&lt;br /&gt;
            &lt;input type="hidden" name="product[]" value="&lt;?php echo the_title(); ?&gt;"&gt;
            &lt;?php } ?&gt;
          &lt;/p&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;?php } ?&gt;
        &lt;?php $items++; endforeach;
                                wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
                                endif; ?&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- end second-step --&gt;

  &lt;div id="third-step"&gt;
    &lt;div class="steps"&gt;
      &lt;p&gt;&lt;b&gt;Step 3 of 3&lt;/b&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="progress-buttons"&gt;&lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;div id="customise-area-3"&gt;
      &lt;p&gt;Summary&lt;/p&gt;
      &lt;div id="customise-area-3-child"&gt;
        &lt;input type="submit" name="submit" id="submit" value="submit" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- end third-step --&gt;

&lt;/form&gt;
</code></pre>

<p>Here's the Jquery:</p>

<pre><code>jQuery(document).ready(function( $ ) {
    //Create nav wrapper
    var $nav = $('&lt;div/&gt;').addClass('prev-next');

    //Create Prev button, attach click handler and append to nav wrapper
    $('&lt;a class="prev" href="#"&gt;Back&lt;/a&gt;').on('click', function () {
        $(this).closest(".step").hide().prev(".step").show();
    }).prependTo($nav);

    //Create Next button, attach click handler and append to nav wrapper
    $('&lt;a class="next" href="#"&gt;Next&lt;/a&gt;').on('click', function () {
        $('.summary_text').html(makeSummary());
        var $step = $(this).closest(".step");
        if (validate($step)) {
            $step.hide().next(".step").show();
        }
    }).appendTo($nav);

    //In one long jQuery chain ...
    //* prepend nav to each step div
    //* hide all steps except the first
    //* convert first 'Back' link and last 'Next' link to spans.
    var $steps = $(".step").prepend($nav).hide()
        .filter(":first").show().find("a.prev").after('&lt;a href="#" class="back-to-product"&gt;Back&lt;/a&gt;').remove().end().end()
        .filter(":last").find("a.next").after('').remove().end().end();

    //Set step titles
    $steps.each(function (i, step) {
        $(step).find(".step-title").text('Step ' + (i + 1) + ' of ' + $steps.length);
    });

    $('a.back-to-product').click(function(){
        $(".customise").hide();
        $(".entire_product").show();
    });

    //Unfortunately, hidden form elements are not inlcuded in the submission,
    //so all steps must be shown before the form is submitted.
    var $submitButton = $("input[name='submit']").on('submit', function () {
        $steps.show();
        return true;
    });

    function validate($step) {
        //var valid = false;
        var valid = true; //for debugging

        //Perform validation
        switch ($step.index(".step")) { //index-origin is zero
            case 0:
                //Validate step 1 here
                //if valid, set `valid` to true 
                break;
            case 1:
                //Validate step 2 here
                //if valid, set `valid` to true 
                break;
            case 2:
                //No validatation required
                break;
        }
        return valid; //Important - determines behaviour after validate() returns.
    }

    function makeSummary() {
        var summary = [];
        $steps.not(":last").each(function (i, step) {
            $step = $(step);
            summary.push('&lt;p&gt;&lt;b&gt;' + $step.data('name') + '&lt;/b&gt;&lt;/p&gt;');
            var $ch = $step.find('input[type="checkbox"]:checked');
            if (!$ch.length) {
                summary.push('&lt;p&gt;No items selected&lt;/p&gt;&lt;br /&gt;');
            } else {
                $ch.each(function (i, ch) {
                    summary.push('&lt;p&gt;' + $(ch).val() + '&lt;/p&gt;&lt;br /&gt;');
                });
            }
        });
        return summary.join('');
    }
});
</code></pre>
