Проблемы с динамическим добавлением нескольких текстовых полей

Question

• Есть два текстовых поля внутри, имеющих соседний с ними знак «+». При нажатии на знак плюса добавляется новое текстовое поле, и оно будет содержать знак «+», а также знак «-» для добавления и удаления текстового поля соответственно. Я использовал this ресурс для реализации моих текстовых полей. Теперь я хочу добавить только 10 текстовых полей для каждого из них. Значения 10 текстовые поля для ключевого слова [] и 10 текстовых полей для link_name [], как вы можете см. Во имя тега ввода. Но с этим кодом он не работает.

  Если я продолжаю добавлять текстовые поля для ключевого слова [], затем добавляют 19 текстовые поля , а затем, если я пытаюсь добавить текстовое поле для link_name [], то он не добавляет одно текстовое окно и отображает достигнут максимальный предел.

  Если добавление сделано наоборот, оно работает правильно.

• Еще одна проблема заключается в том, что эффект отскока не работает. Не так много знаком с эффектами, так что не удалось найти причину, почему это не работает.

JQuery и HTML приведены ниже:

JQuery

$(document).ready(function() { 
    var id_1 = 2, max = 9, append_data; 
    /*TEXT BOXES FOR LINK NAMES*/ 
    /*If add_1 icon was clicked*/ 
    $("#add_1").live('click', function(){ 
     if($("div[id^='txt_']").length <9){ //Don't add new text box if limit is reached 
      $(this).remove(); //remove add icon from the current text box 
      var append_data = '<div id="txt_'+id_1+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="input_'+id_2+'" name="link_name[]"/></div><div class="right"><img src="add.png" id="add_1"/> <img src="remove.png" id="remove_1"/></div></div>'; 
      $("#textboxes_1").append(append_data); //append new text box in main div 
      $("#txt_"+id_1).effect("bounce", { times:3 }, 300); //display block appended text box with silde down 
      id_1++; 
     } 
     else{ 
      alert("Maximum 10 textboxes are allowed"); 
     } 
    }) 
    $("#remove_1").live('click',function(){ 
     var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box 
     $(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up 
     if($("div[id^='txt_']").length >1){ 
      append_data = '<img src = "remove.png" id = "remove_1"/>'; 
     } 
     else{ 
      append_data = ''; 
     } 
     if($("#add_1").length< 1){ 
      $("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_1"/>'+append_data); 
     } 
     }); 
    }) 

/*TEXT BOXES FOR KEYWORDS*/ 

    /*If add_2 icon was clicked*/ 
    var id_2 = 12, max = 19; 
    $("#add_2").live('click', function(){ 
     if($("div[id^='txt_']").length <19){ //Don't add new text box if limit is reached 
      $(this).remove(); //remove add icon from the current text box 
      var append_data = '<div id="txt_'+id_2+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="input_'+id_2+'" name="keyword[]"/></div><div class="right"><img src="add.png" id="add_2"/> <img src="remove.png" id="remove_2"/></div></div>'; 
      $("#textboxes_2").append(append_data); //append new text box in main div 
      $("#txt_"+id_2).effect("bounce", { times:3 }, 300); //display block appended text box with silde down 
      id_2++; 
     } 
     else{ 
      alert("Maximum 10 textboxes are allowed"); 
     } 
    }) 
    $("#remove_2").live('click',function(){ 
     var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box 
     $(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up 
     if($("div[id^='txt_']").length >1){ 
      append_data = '<img src = "remove.png" id = "remove_2"/>'; 
     } 
     else{ 
      append_data = ''; 
     } 
     if($("#add_2").length< 1){ 
      $("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_2"/>'+append_data); 
     } 
     }); 
    }) 
}); 

HTML

<div id="textboxes_1" class="inline"> 
    <div id="text_1" class="text_div"> 
     <div class="left"> 
      <input type="text" id="input_1" value="Enter URL(s) here" name="link_name[]" /> 
     </div> 
     <div class="right"> 
      <img src="add.png" id="add_1" /> 
     </div> 
    </div> 
</div> 
<div id="textboxes_2" class="inline"> 
    <div id="text_11" class="text_div"> 
     <div class="left"> 
      <input type="text" id="input_11" value="Enter Keyword(s) here" name="keyword[]" /> 
     </div> 
     <div class="right"> 
      <img src="add.png" id="add_2" /> 
     </div> 
    </div> 
</div> 
<div style="clear:left;"></div> 
<input type="submit" id="submit" name="submit" value="SUBMIT"> 

Answer 1

ОК, так что ответ прост Вы сделали несколько логических ошибок , ниже приведен ваш код с некоторыми исправлениями i n комментарии:

$(document).ready(function() { 
var id_1 = 2, max = 9, append_data; 
/*TEXT BOXES FOR LINK NAMES*/ 
/*If add_1 icon was clicked*/ 
$("#add_1").live('click', function(){ 
    if($("#textboxes_1 input").length <10){ //Don't add new text box if limit is reached 
// Here You have to check #textboxes_1 for his own input's, and You have to give 10 not 9, becouse lenght is allways actual number of elements 

     $(this).remove(); //remove add icon from the current text box 
     var append_data = '<div id="txt_'+id_1+'" class="txt_div"><div class="left"><input type="text" id="input_'+id_1+'" name="link_name[]"/></div><div class="right"><img src="add.png" id="add_1"/> <img src="remove.png" id="remove_1"/></div></div>'; 
// in the code abowe You give id="input_'+id_2+'", I belive it should be id="input_'+id_1+'" 
     $("#textboxes_1").append(append_data); //append new text box in main div 
     $("#txt_"+id_1).effect("bounce", { times:3 }, 300); //display block appended text box with silde down 
     id_1++; 
    } 
    else{ 
     alert("Maximum 10 textboxes are allowed"); 
    } 
}) 
$("#remove_1").live('click',function(){ 
    var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box 
    $(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up 
    if($("div[id^='txt_']").length >1){ 
     append_data = '<img src = "remove.png" id = "remove_1"/>'; 
    } 
    else{ 
     append_data = ''; 
    } 
    if($("#add_1").length< 1){ 
     $("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_1"/>'+append_data); 
    } 
    }); 
}) 

/*TEXT BOXES FOR KEYWORDS*/ 

/*If add_2 icon was clicked*/ 
var id_2 = 12, max = 19; 
$("#add_2").live('click', function(){ 
    if($("#textboxes_2 input").length <20){ //Don't add new text box if limit is reached 
// The same issue was here as well 

     $(this).remove(); //remove add icon from the current text box 
     var append_data = '<div id="txt_'+id_2+'" class="txt_div" ><div class="left"><input type="text" id="input_'+id_2+'" name="keyword[]"/></div><div class="right"><img src="add.png" id="add_2"/> <img src="remove.png" id="remove_2"/></div></div>'; 
     $("#textboxes_2").append(append_data); //append new text box in main div 
     $("#txt_"+id_2).effect("bounce", { times:3 }, 300); //display block appended text box with silde down 
     id_2++; 
    } 
    else{ 
     alert("Maximum 10 textboxes are allowed"); 
    } 
}) 
$("#remove_2").live('click',function(){ 
    var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box 
    $(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up 
    if($("div[id^='txt_']").length >1){ 
     append_data = '<img src = "remove.png" id = "remove_2"/>'; 
    } 
    else{ 
     append_data = ''; 
    } 
    if($("#add_2").length< 1){ 
     $("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_2"/>'+append_data); 
    } 
    }); 
}) 

});