Добавить ограничение 5 раз только jquery .append

Question

Я видел похожие вопросы с ответами здесь, но ничто не могло исправить мою проблему. Поэтому я снова спрашиваю его здесь.

С jquery я хочу, чтобы пользователи добавляли поле ввода пять раз, я использовал .append, который работает нормально, но добавляет неограниченное количество раз.

$("#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); 

     }); 

Пожалуйста, укажите исправление, я новичок в jquery. Я также пробовал следующий код, но с этим кодом .append перестает работать:

$("#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); 
     } 
     }); 

Answer 1

Что-то вроде этого?

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); 
}); 

Answer 2

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++; 
    } 
}); 

Answer 3

Ну новая идея управлять этим просто удалить обработчик щелчка после добавления 5 элементов.

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. 
} 
});