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.