JQuery Создание конфликта HTML-символов при генерации html с append()

Question

Я работаю над формой множественного выбора, где пользователь может добавить поле ввода для вопроса. Значит, если в вопрос один ответ, то пользователь может добавить другое поле ввода-ответа ansewer нажав на кнопку. Как мудрый:

$(document).ready(function() { 
    var max_fields  = 5; //maximum input boxes allowed 
    var wrapper   = $(".addChoices"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div class="form-group"><label class="col-md-3 control-label" for="duration">Answer</label><div class="col-md-6"><input id="duration" name="answer[]" type="password" placeholder="Answer" class="input input-md"> <input type="checkbox" name="correct"> Correct </div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

Это работает, но я также хочу, то пользователь может добавить целый другой вопрос, который я написал следующий код.

$(document).ready(function() { 
    var max_fields  = 5; //maximum input boxes allowed 
    var wrapper   = $(".questions"); //Fields wrapper 
    var add_button  = $(".add_question_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div class="component addChoices"><!-- Password input--><div class="form-group"><label class="col-md-3 control-label" for="duration">Question</label><div class="col-md-8"><input id="duration" name="duration" type="password" placeholder="Question" class="input input-md"></div></div><div class="form-group"><label class="col-md-3 control-label" for="duration">Answer</label><div class="col-md-6"><input id="duration" name="answer[]" type="password" placeholder="Answer" class="input input-md"><input type="checkbox" name="correct"> Correct &nbsp;&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div></div><div class="form-group"><label class="col-md-3 control-label" for="duration"></label><div class="col-md-6"><button class="add_field_button">Add Choices</button></div></div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

Теперь вопрос заключается в том, что первый код есть кнопка add_field_button, которая затем снова добавляет в вопросе добавить раздел. На одной странице есть две кнопки с тем же именем, что и JQuery.

Конфликт должен быть устранен.

Answer 1

Какое у них имя? В любом случае вы можете дать первоначальный идентификатор к 1-й кнопке, скажем id="btn1", чем создавать различные id -s для новых кнопок, на основе «счета текстовое поле» значение, а также скрыть предыдущую кнопку Как здесь:

$(document).ready(function(){ 
    x=1; //initlal text box count 
}); 

$(".add_question_button").click(function(e) { 
    e.preventDefault(); 
    addform();  
}); 

$(".questions").on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }); 

function addform(e){ //on add input button click 
    var max_fields  = 5; //maximum input boxes allowed 
    var wrapper   = $(".questions"); //Fields wrapper 
    var add_button  = $(".add_question_button"); //Add button ID 

     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div class="component addChoices"> 
<!-- Password input--><div class="form-group"><label class="col-md-3 control-label" for="duration">Question</label> 
<div class="col-md-8"><input id="duration" name="duration" type="password" placeholder="Question" class="input input-md"></div></div> 
<div class="form-group"><label class="col-md-3 control-label" for="duration">Answer</label> 
<div class="col-md-6"><input id="duration" name="answer[]" type="password" placeholder="Answer" class="input input-md"><input type="checkbox" name="correct"> Correct &nbsp;&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div></div> 
<div class="form-group"><label class="col-md-3 control-label" for="duration"></label> 
<div class="col-md-6"> 
<button id="btn'+x+'" class="add_question_button" onclick="javascript:addform()">Add Choices</button></div></div>'); //add input box 

    $("#btn"+(x-1)).hide(); 
     } 
    }