I have seen similar questions with answers here but nothing could fix my issue. So i am asking it here again.

With jquery i want users to add input field five times only , i used .append which is working fine but its adding unlimited times.

$("#add-cert").click(function(){
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");

        $("i").append($addinput);

        });

Please provide fix , i am new to jquery. I have tried following code too but with this code .append stops working:

$("#add-cert").click(function(){
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text' name='manual-cert'></div></div>");

        var num = $("input[name='manual-cert']").length;

        if(num > 5){
        $("i").append($addinput);
        }
        });

I have seen similar questions with answers here but nothing could fix my issue. So i am asking it here again.

With jquery i want users to add input field five times only , i used .append which is working fine but its adding unlimited times.

$("#add-cert").click(function(){
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");

        $("i").append($addinput);

        });

Please provide fix , i am new to jquery. I have tried following code too but with this code .append stops working:

$("#add-cert").click(function(){
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text' name='manual-cert'></div></div>");

        var num = $("input[name='manual-cert']").length;

        if(num > 5){
        $("i").append($addinput);
        }
        });

• javascript
• jquery

• Don't give different inputs the same name. – Itay Commented Sep 5, 2013 at 12:43
• 2 You're soo close. Just change if(num > 5) to if(num < 5) (if num is less than 5) – pawel Commented Sep 5, 2013 at 12:44

3 Answers 3

Something like this?

var maxAppend = 0;
$("#add-cert").click(function(){
    if (maxAppend >= 5) return;

    var addinput = $(
        "<div class='row'><div class='small-6 columns'>"+
        "<label class='right inline'>Enter Your Certificate</label></div>"+
        "<div class='small-6 columns'><input type='text'></div></div>");
    maxAppend++;

    $("i").append(addinput);
});

Well a new idea to manage this is just remove the click handler after appending 5 elements.

var count = 1;

$("#add-cert").click(function(){
    if(count < 5) {
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");

        $("i").append($addinput);

        count++;
    }
  else{
    $("#add-cert").off("click");   //remove click listener. 
 }
});

var count = 0;

$("#add-cert").click(function(){
    if(count < 5) {
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");

        $("i").append($addinput);

        count++;
    }
});