Dip Dip - 27 days ago 17
HTML Question

Jquery generate html with append() button conflict

I have a scenario :

Example Code | JSFiddle

I am building a questionnair app, Where i have many questions against one questionnair.

On the add-question page, I have one question by default and

other can be generated by jquery
.

Now
Below each question a button with name add answer
creates the maximum 4 answers for a single question.

And on the same page i have a
button for add another question


So i do successfully generates answers(text field) for first question like wise.

$(document).ready(function() {
var max_fields = 3;
var wrapper = $(".addChoices");
var add_button = $("#add_field_button");
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>');
}
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});


And for question generation i have code which generates question via
jquery append()
:

function addform(e){ //on add input button click
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".add-question-wrapper"); //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="row"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question Type</label> <div class="col-md-8"><select class="form-control"><option>Text</option><option>MCQs</option></select></div></div></div></div><div class="row addChoices"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span>&nbsp;| &nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div><div id="add-choice"><button type="button" class="btn btn-primary btn-sm" id="add_field_button">Add Choice</button></div>');
}
}


Problem :

When i generates a new question then the button for generating answers for each question in the generated question's html button's id the same with the default question button's id.

To understand it :

Button's id with default question is now equal to generated question button id are same.

Now the generated question add answer button does not works neither the default question button.

Problem : Button id conflict.

Answer

So there are a few issues i can see there.

  1. You need to use the class name instead of id add_field_button.

  2. You need to have some x and y. Different for keeping a track of total number of questions and total number of answers differently. Instead of x you should calculate the number of elements present as number of choices should be on per question basis.

  3. Wrapper should be the closest .addChoices

    $(document).on("click", ".add_field_button", function(e) {
    var wrapper = $(this).closest("div").prev(".addChoices");
    var _num_choices =  $(this).closest("div").prev(".addChoices").find(".singletonChoiceContainer").length;
    
    if (_num_choices < max_fields) {
      x++;
        wrapper.append('<div class="col-md-8 singletonChoiceContainer"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>');
    }
    });
    

Here is the updated fiddle

Comments