Creating multiple custom dialogs having different forms using Alterifyjs library

Question

I have 6 buttons on a page. On clicking each of the button, I need to show a dialog box, where user can fill in a small form. I'm trying to handle all the forms with just one custom dialog, by using the dialog in singleton mode since only 1 form can be opened at a time. When the user needs to open a second form, the current dialog must be closed and then he/she can open the next form. I can simply use the same dialog to show the different contents. However, when I open a second form, the div holding the previous form is replaced by the new form. How can I save the div containing my previous form from getting removed from the page when I open another form? I noticed that all the alterifyjs elements are kept at the bottom of the page. Do I have to use my own logic to make sure I save the contents at a separate place before the second form gets loaded?

Html page is somewhat like:

<div id="form1" style="display: none">
    <label>Field 1:</label>
    <input type="text" id="f1">
    <label>field 2:</label>
    <input type="text" id="f2">
</div>
<div id="form2" style="display: none">
    <label>Field 3:</label>
    <input type="text" id="f3">
    <label>field 4:</label>
    <input type="text" id="f4">
</div>
<div id="form3" style="display: none">
    <label>Field 5:</label>
    <input type="text" id="f5">
    <label>field 6:</label>
    <input type="text" id="f6">
</div>
<div id="form4" style="display: none">
    <label>Field 7:</label>
    <input type="text" id="f7">
    <label>field 8:</label>
    <input type="text" id="f8">
</div>

My js is somewhat like:

alertify.dialog('customModal',function factory(){
    return{
        main:function(content){
            this.setContent(content);
        },
        setup:function(){
            return {
                options:{
                    basic:false,
                    maximizable:false,
                    resizable:false,
                    padding:false,
                    closableByDimmer:false,
                    title:'My custom dialog'
                }
            };
        }
    };
});

//Tying up form with the buttons
$("body").on("click","#btn1",function(){

    alertify.customModal($('#form1')[0]).set('title','Form 1');
    $('#form1').show();
});

$("body").on("click","#btn2",function(){

    alertify.customModal($('#form2')[0]).set('title','Form 2');
    $('#form2').show();
});

$("body").on("click","#btn3",function(){

    alertify.customModal($('#form3')[0]).set('title','Form 3');
    $('#form3').show();
});

$("body").on("click","#btn4",function(){

    alertify.customModal($('#form4')[0]).set('title','Form 4');
    $('#form4').show();
});

Jsfiddle link: https://jsfiddle.net/tu3mq98x/

Notice that, when we click Btn1 and then Btn2, the contents of Form1 are replaced by Form2. As a result when we again click on Btn1 (after clicking on Btn2) , we get From2 instead of Form1. How can I correct this? Please let me know if there's a better approach for this.

Answer 1

Since the contents gets replaced, you just need to save a reference of each form node and re-use it on next open.

Something like:

var form1
$("body").on("click","#btn1",function(){
    form1 = form1 || $('#form1').show()[0]
    alertify.customModal(form1).set('title','Form 1');
});

See updated fiddle.