Add More Dynamic Repeat Block using Jquery

Sharing demo of add more and remove feature of dynamic block of html using jQuery

First you need to create HTML which you want to repeat. Please make sure naming of elements should be unique which you are using. I was facing issues of naming which is taking same and block was not properly named. So I thought I will help to others for creating dynamic html add more and remove feature in simple way.

I am presenting demo for preparation steps for recipe. Recipes have multiple steps so this steps need to repeat based on your recipe. I have facing issues of repeat fields counter.

I am repeating preparation steps for recipe using jQuery as below

Step 1 : HTML for repeat preparation steps. I have taken one hidden fields for how many steps want to save database and for which next block name would be. (see in attachment block which I want to repeat)

 



                


Recipe Name: *


                        



Preparation Steps: *




STEP 1 







                                        


                                        




Add another step
                            



 

Step 3 : Add jQuery js and on page loading I have set value of totalSteps value as 1 when I click on add another step it will be increment by 1 and update the value in totalSteps hidden value. (see in attachment after adding repeat block in HTML)

    $(document).ready(function () {
        $("#totalSteps").val("1");
         });

    $("#addAnotherStep").click(function () {
        var addStep = parseInt($("#totalSteps").val()) + 1;
        $("#totalSteps").val(addStep)
        var appendStep = '


STEP ' + addStep;
        appendStep += '



';

        appendStep += '












';
        $("#allSteps").append(appendStep);
        for (var i = 2; i < addStep; i++)
        {
            $("#step_" + i + "_heading").children("#removeStep").remove();
        }
    });

Step 4 : Remove other block except first block

    $(document).on("click", "#removeStep", function () {
        $("#dialog").text('');
        $("#dialog").text('Are you sure to remove this step? This cannot be undone.');
        $("#dialog").dialog({
            resizable: false,
            height: 140,
            width: 400,
            modal: true,
            buttons: {
                "Ok": function () {
                    var removeStep = $("#totalSteps").val();
                    $("#" + removeStep).remove();
                    $("#totalSteps").val(parseInt(removeStep) - 1);
                    var lastStep = $("#totalSteps").val();
                    if (lastStep >= 2)
                    {
                        $("#step_" + lastStep + "_heading").prepend('


');
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    });