JQuery, генерирующий конфликт кнопок HTML при генерации html с добавлением()

Я работаю над формой множественного выбора, где пользователь может добавить поле ввода для вопроса, означает, что если вопрос один ответ, то пользователь может добавить другое поле ввода 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.

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

1 ответ

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

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