Show checkbox selections on a summary page
<p>This is related to my previous question <a href="http://stackoverflow.com/questions/14858495/show-user-inputs-on-a-summary-page">here</a>, but I think it's more simple.</p>

<p>I'm creating a step by step process that has several steps, the final step being a summary page. Each step includes some checkboxes, on the summary page I want to show what was selected then allow them to submit the form.</p>

<p>I'm struggling with understanding the process from the related question, hopefully this simplified version will help me understand.</p>

<p>Here's my setup:</p>

<pre><code>&lt;?php $counter = 1; 
$amount = get_field('select_number_of_questions');
$repeater = get_field("step_by_step_test");
shuffle($repeater);
$repeater_limit = array_slice($repeater,0,$amount);
foreach($repeater_limit as $repeater_row) { ?&gt;
&lt;div class="form-row"&gt;
        &lt;div id="modules-repeat"&gt;                           
            &lt;p class="training"&gt;&lt;?php echo $repeater_row['question']; ?&gt;&lt;/p&gt;&lt;br /&gt;
            &lt;p class="training-highlight"&gt;Please choose &lt;span class="bold"&gt;&lt;?php echo $repeater_row['required_answers']; ?&gt;&lt;/span&gt; of the following answers:&lt;/p&gt;&lt;br /&gt;
            &lt;?php $rows = $repeater_row['answer_options'];
            foreach ($rows as $row){ ?&gt;
            &lt;?php $Question[$counter] = $_POST['answer'.$counter]; ?&gt;
                    &lt;div style="display:table-row;"&gt;
                    &lt;div style="display:table-cell;"&gt;
                        &lt;input style="width: 20px;" type="checkbox" name="answer&lt;?php echo $counter; ?&gt;[]" value="&lt;?php echo the_sub_field('answer'); ?&gt;" /&gt;
                    &lt;/div&gt;
                    &lt;div style="display:table-cell;"&gt;
                        &lt;p&gt;
                            &lt;?php echo $row['answer']; ?&gt;
                        &lt;/p&gt;
                    &lt;/div&gt;              
                    &lt;/div&gt;
            &lt;?php } ?&gt;
            &lt;div class="inner"&gt;&lt;/div&gt;
            &lt;button class="next"&gt;&lt;/button&gt;

            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;?php $counter++; } ?&gt;

&lt;div class="form-row" id="form-row-last" style="display:none;"&gt;
    &lt;div id="modules-repeat"&gt;                           
        &lt;p&gt;Summary page&lt;/p&gt;
            &lt;?php foreach($repeater_limit as $repeater_row) { ?&gt;
                &lt;p class="training"&gt;&lt;?php echo $repeater_row['question']; ?&gt;&lt;/p&gt;&lt;br /&gt;
            &lt;?php } ?&gt;
            &lt;div class="inner"&gt;&lt;/div&gt;
            &lt;button class="next"&gt;&lt;/button&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
</code></pre>

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

<pre><code>&lt;script type="text/javascript"&gt;
jQuery(function($) {
$(document).ready(function() {    

    // prepend a 'previous' button to all form-rows except the first
    $('&lt;button&gt;').addClass('previous').appendTo($('.inner').not(':first'));

    // hide all form-rows, but not the first one
    $('.form-row').not(':first').hide();

    // hide on last step
    $('button.next').last().hide();

    // add the submit button to the last form-row
    $('&lt;input&gt;').addClass('check').prop('type', 'submit').appendTo($('.form-row:last'));


    // handle the previous button, we need to use 'on' here as the
    // previous buttons don't exist in the dom at page load
    $('.form-row').on('click', 'button.previous', function(e) {
        e.preventDefault();
        $(this).parents('div.form-row').hide().prev('div.form-row').show();
    });

    $('button.next').click(function(e) {
        // prevent the next buttons from submitting the form
        e.preventDefault();
        // hide this form-row, and show the next one
        $(this).parents('div.form-row').hide().next('div.form-row').show();
    });    

});
});
&lt;/script&gt;
</code></pre>

<hr>

<p>@Niels currently has the closest answer. This is my html/php setup, with using the jquery from @Niels answer, it grabs the question but not the answer that is checked.</p>

<pre><code>&lt;p class="training"&gt;&lt;?php echo $repeater_row['question']; ?&gt;&lt;/p&gt;&lt;br /&gt;
&lt;p class="training-highlight"&gt;Please choose &lt;span class="bold"&gt;&lt;?php echo $repeater_row['required_answers']; ?&gt;&lt;/span&gt; of the following answers:&lt;/p&gt;&lt;br /&gt;

&lt;div class="question" data-max-answers="&lt;?php echo $repeater_row['required_answers']; ?&gt;"&gt;
    &lt;?php $rows = $repeater_row['answer_options'];
    foreach ($rows as $row){ ?&gt;
    &lt;?php $Question[$counter] = $_POST['answer'.$counter]; ?&gt;
    &lt;div style="display:table-row;"&gt;
        &lt;div style="display:table-cell;"&gt;
            &lt;input style="width: 20px;" type="checkbox" name="answer&lt;?php echo $counter; ?&gt;[]" value="&lt;?php echo the_sub_field('answer'); ?&gt;" /&gt;
        &lt;/div&gt;
        &lt;div style="display:table-cell;"&gt;
            &lt;p&gt;
                &lt;?php echo $row['answer']; ?&gt;
            &lt;/p&gt;
        &lt;/div&gt;              
    &lt;/div&gt;
    &lt;?php } ?&gt;
&lt;/div&gt;  
&lt;div class="inner"&gt;&lt;/div&gt;
&lt;button class="next"&gt;&lt;/button&gt;
&lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
