How to create a dynamic preview for a dynamic form in jQuery

Question

I have dynamic form that clones the following form section using javascript and jQuery. The cloning section works fine for me. But I want to add a dynamic preview of the form in the same page in a different div as list of the options that are being selected.

If someone selects Option 1 it will preview

1. Option 1. 

Then if a section is added and selects Option 2 from the cloned section, it'll preview

1. Option 1
2. Option 2

And if a section is removed, say the first section, then the preview will automatically update and will show

1. Option 2. 

Any suggestion how can I achieve that?

This is my form:

<form id="form">
    <div id="sections">
        <div class="section">
            <select name="form">
                <option value="option 1">Option 1</option>
                <option value="option 2">Option 2</option>
                <option value="option 3">Option 3</option>
            </select>
            <p><a href="#" class='remove'>Remove Section</a></p>
        </div>
    </div>
    <p><a href="#" class='addsection'>Add Section</a></p>
</form>

And the Javascript:

var template = $('#sections .section:first').clone();
var sectionsCount = 1;
$('body').on('click', '.addsection', function() {

    sectionsCount++;
    var section = template.clone().find(':input').each(function(){
        var newId = this.id + sectionsCount;
        $(this).prev().attr('for', newId);
        this.id = newId;

    }).end()

    .appendTo('#sections');
    return false;
});

$('#sections').on('click', '.remove', function() {
    $(this).parent().fadeOut(300, function(){
        $(this).parent().parent().empty();
        return false;
    });
    return false;
});

Update : Will really appreciate a working fiddle example.

Answer 1

add a <div> to your form where you want the preview

<form id="form">
    <div id="sections">
        <div class="section">
            <select name="form" id="MySelect">
                <option value="option 1">Option 1</option>
                <option value="option 2">Option 2</option>
                <option value="option 3">Option 3</option>
            </select>
            <p><a href="#" class='remove'>Remove Section</a></p>
        </div>
    </div>
    <p><a href="#" class='addsection'>Add Section</a></p>

    <div class="MyPreview">

    </div>

</form>

The cloning section works fine for me.

while cloning append the cloned section to the div

$(".MyPreview").append( "<p>1. Option 1. </p>" );

Try something like this, i haven't checked this yet,

var i = 1;
$('body').on('click', '.addsection', function() {

    sectionsCount++;
    var section = template.clone().find(':input').each(function(){
        var newId = this.id + sectionsCount;
        $(this).prev().attr('for', newId);
        this.id = newId;

    }).end()

    .appendTo('#sections');

    var e = document.getElementById("MySelect");
    var MyValue = e.options[e.selectedIndex].value;
    var MyOption = e.options[e.selectedIndex].text;

    $(".MyPreview").append( "<div class='"+ MyValue +"'>" + i + "." + MyOption +". </p>" );
    i++;

    return false;
});

add the value of option as class to div so on remove use the class to remove the div.

$(".MyValue").remove();


$('#sections').on('click', '.remove', function() {
   $(this).parent().fadeOut(300, function(){
       $(this).parent().parent().empty();
       return false;
   });

   var e = document.getElementById("MySelect");
   var MyValue = e.options[e.selectedIndex].value;

   $(".MyValue").remove();

   return false;
});

Hope it works for you